Div height to image height and image width to div width - javascript

I have a div I use as a container and an image I use as a "background" (not literally, I was told I couldn't do this with background attribute) and then a content div:
CSS
#container {
display:table;
width: 100%;
min-width:100%;
}
.img1 {
//DON'T KNOW WHAT TO PUT HERE;
}
#content {
//not important;
}
HTML
<div id="container">
<img class="img1" src="img.png"/>
<div id="content"> Content </div>
</div>
I need the container div to be 100% screen width, and so the contained image, while both of them must have the image's resulting height (after the resizing from taking 100% screen width) (no stretching).
Any way to do that? I tried a lot of min-height and width combination but nothing worked so far.
I prefer CSS and HTML only solutions, if possible.

Not exactly sure what you mean, but how does this look: https://jsfiddle.net/b76fjtcv/
basically it's
.img1 {width: 100%;}
This updated version of the fiddle also adds a max width to the img so it doesn't get too fuzzy. Just set the max-width of the .img1 to the image's full width.

What are both images? You only have one. look at this, you can use tables for formatting as well if you're not comfortable with div's.
Also, your image could be smaller or larger than the screen width, what then? Do you want scrolling or scaling?

Related

Have the same height with autoWidth enabled OwlCarousel

I want to show a little gallery in my website, but the images are not responsive with the AUTOWIDTH CODE, and they don't have the same height.
I create a JS Fiddle so I can explain my self better.
https://jsfiddle.net/w6axkqmz/1/
I tried using this CSS
.gallery .owl-carousel .owl-stage {
display: flex !important;
}
.gallery .owl-carousel .owl-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
But leave the rectangular images as a square.
Do not set height:50vh it is going to set the height of every image to 50% of browser's viewport's height. But without setting the height, object-fit is not going to work. Set height as 100% so that it will be of the same height of gallery.
Relative JSFiddle https://jsfiddle.net/2psgqb3v/
The reason you need width and height set is because for browser needs to fit the image/object to that height. If you don't specify that, then browser will take image's height/width to render.
The solution is to have media query to set the width and height of the images.
Relative fiddle https://jsfiddle.net/74rok0yg/

Stretch images if needed only up to 20%

We have an image gallery with responsive sizes, using a ready made React gallery.
The images need to fit into a container with predefined, responsive height and width, but the images we're getting from the server are in different proportions and sizes: sometimes the proportions don't match, and sometimes the image is not big enough to even fill the container.
The product requirement is that an image should only be scaled up to 20% of the original image size to fit the container:
How do I even refer to the original image size in CSS? If I use percentage that would be referring to the container size... I stumbled upon Object-fit but it's not supported on IE.
I thought of using inline styles from JS but that would be complicated since this is responsive and the sizes would need to be calculated again on each window resize.
Thank you.
There can be two cases :
If you are taking <img> inside you container
.container
{
width:100%;
height:300px;
}
.container img
{
min-height:100%;
min-width:100%;
max-height:100%;
max-width:100%;
}
<div class="container">
<img src="https://regmedia.co.uk/2015/11/16/help_2.jpg">
</div>
If you are taking image as background of the container
.container
{
background-image: url('https://regmedia.co.uk/2015/11/16/help_2.jpg');
background-size: 100% 100%;
width:80%;
height:200px;
}
<div class="container">
</div>

Image max-height

I have got a tiny problem, im creating a website and i want to give an image a max-height. The image may only have the same height of another div.
You can check the layout here: http://bit.ly/1OAGsLR
Its about the 1920x1080 image, and i needs to be the same height as the div with class box left to it. If right the image should scale well.
But im trying all i know but i dont get it working, can someone get this working with CSS or do i need to use Javascript for this?
Thanks in advance!
Your image is looking the way you want when the screen width is at or above 1400px. You should consider using css media queries to move or adjust the image at different screen widths. Your layout could easily be handled using a css framework like foundation or bootstrap which would take care of css media query breakpoints for you.
If you are intentionally trying to not use a css framework, I'd check out this css media queries tutorial to get you started.
You need to make your container div wider.
Your container is 1200px wide, and your boxes are 560 + 40 padding wide each.
That means that the max width of you image is 560px.
Now to conserve it's aspect ratio of 16:9, the max height of the image is 560 / 16 * 9 = 315 pixels.
Okay, your main problem is that heights don't like to be defined this way. I have a solution for you that will 'solve' this issue, but its not very pretty and you might want to look into doing this with javascript anyhow. Below is a very rough example mockup.
body > div {
width: 100%;
max-width: 500px;
background: green;
padding: 10px;
position: relative;
}
body > div > div {
width: 50%;
padding: 20px;
}
body > div > img {
position: absolute;
right: 20px;
top: 20px;
max-width: 50%;
/* make sure to fall back to 80% so theres at least some gutter for older browsers */
max-height: 80%;
/* use calc to make the image the height of the relative parent minus padding */
max-height: calc(100% - 40px);
}
<div>
<div>Push<br />Push<br />Push<br />Push<br />Push<br /></div>
<img src="http://placehold.it/350x150" />
</div>
In short, this will place your image to the right of your box, give it a max-height (because positioning can do that) and a max-width (so smaller screen sizes don't freak out).
Now you could easily translate this a more general system where .box + .boxget a absolute position, or you could define a class for the box that has to push content and add that to the first box, making all other boxes absolute.
I fixed it by using JS, im using the following script:
<script type="text/javascript">
function changeheight(){
var Height = document.getElementById('box').clientHeight;
document.getElementById('imagebox').style.height = Height+'px';
}
</script>

div height occupy remaining browser window with a non-fixed overall height

I can get Alvaro's fiddle: http://jsfiddle.net/S8g4E/955/ to work the way I want it to only for width but not height ... my lower component canvas is very large (5000px square) and I want it to scroll in both directions, but have the "viewport" grow to the full size of its containing lower window ...
If you look at my fiddle: http://jsfiddle.net/tconway556/4LCj2/
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down" style="overflow:scroll; width: 100%;">
<canvas width="5000px" height="5000px">
</canvas>
</div>
</div>
#container { width: 100%; height: 300px; border:1px solid red;}
#up { background: green; height:80px}
#down { background:pink; height: calc(100% - 80px); }
the width is working as I want. but not the height. I can only hard code the height of the overall container to a fixed value.
If you resize the browser with my fiddle in it, the width of canvas viewport adapts to the containing window, but the height remains fixed. This makes sense since I fixed it at 300px .. but ...
If I replace the fixed 300px with 100% in the #container, the height grows to 5000px + .... what I wanted was the same behavior we see with width. ie. When you resize the outer browser window both width and height of the viewport adapt to the browser boundaries ...
Does anyone have a solution for this ?
Im just replying from a phone so can't look at your fiddle and resize etc but if I understand your problem correctly you could try removing the height value and instead using padding-bottom: with a percentage value.
You'll have to play around with the values for padding-bottom to see what works for your needs but this will allow the height to adjust dynamically and should scale with your resizing window. Its a bit of a trial a d error one but ive used it before to solve a similar issue

Display image according div tag width and height style properties

So I have this sample to illustrate what I need :
css
.thumb-image {
height:450px;
width:450px;
}
#image-container {
width: 800px;
height: auto;
}
html
<div id="image-container">
<img src="Forest.jpg" class="thumb-image" alt="Forest" style="cursor: pointer;" />
</div>
js
$('.thumb-image').click(function(){
$(this).toggleClass('thumb-image');
});
Here the image is downloaded from the client at its full size. I don't use cached images and in order to simulate thumbnails, I just apply width and height to each image. However I want the user to be able to see larger image when he clicks on it, so I found that using $(this).toggleClass('thumb-image'); is most appropriate because this gives me the ability to enlarge the image and then turn it back to the predefined dimensions which is ok. But some images are too large so I want to restrict the width of the displayed image to something acceptable (which in my case is 800px) and also I want to be able to control the place where the enlarged image is shown so I created a <div id="image-container"> where I want to appear my enlarged image.
The problem is that I don't know how to force the image to occupy only the space of the div without enlarging the div as it happens now.
You could make sure no images are wider than its container with something like this;
#image-container img {
max-width: 100%;
}
The best solution would be to not serve images bigger than you need, save some bandwidth ;)
<style>
.thumb-image {
height: 450px;
width: 450px;
}
#image-container {
max-width: 800px;
height: auto;
}
#image-container img {
width: 100%;
}
</style>
You can user overflow:hidden in your image-container div or also assign 100% width to img tag.
Suggestion :-
It is not an optimum way to do this. if your image-container having less width than you should resize your image using image thumbnail library. there are number of benefits to use resize image instead of control height width using html and css.
small size image take less time to page load
image looks good. without stretch

Categories

Resources