How can I make an image fit a whole div (resizing the image if necessary)?
yes, You can use
width: auto;
height: 400px;
object-fit: cover;
Instead of cover you can use contain, fill, etc as per your choice.
You cannot always display with the same dimensions
Because your container may be other sizes
But the normal way is to set the height to 100% and hide it overflow
Or vice versa
width: 100%
or use object-fit: hover
same as:
img {
width:100%;
height:100%;
object-fit:cover;
}
If you provide the height OR width of DIV in %, then the div will be expanded as per the size of the image but if you provide the width and height of the div in pixle "px" then the div will have fixed height and width.
Related
I have an image element, it can contain any aspect ratio of the image (eg horizontal and vertical). I want to fill the page with it until either its height or width is 100% of the page.
I tried checking the image height and width and setting min-width/height to 100%. This worked very well for vertical images, but with horizontal images, sometimes the 100% height gets reached before the width does, (especially on 4:3 aspect ratio images).
Basically, I just want it to fill either the height or width of the screen, depending on what happens first.
Try with object-fit on image, so it fits it's container and chose the value that suits your needs best.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
The object-fit property will do this if you set it to contain (if you set it to fill it will become distorted if the aspect ratio of the container and the img are not the same).
Here's a simple example, change the viewport dimensions to see the affect on the image:
.container {
width: 50vw;
height: 50vh;
background: gray;
}
.container img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="container">
<img src="https://picsum.photos/id/1015/768/1024"/>
</div>
I need help making my image take up no width on the HTML. What I mean by this is when you shrink the width size of the window, I don't want the image affecting the horizontal slider. I would think overflow:hidden; would work but the right side of the image takes up space on the HTML document.
You could add max-width: 100% to the img element. In doing so, the img will never take up more than 100% of the width of the parent element.
img {
max-width: 100%;
}
Alternatively, you could also use max-width: 100vw (which is 100% of the browser width's width).
img {
max-width: 100vw;
}
Use a width: 50%; instead of px. Play around with which % value best corresponds to your image width. That way the image will automatically adjust to the browser windows size.
I have a container that has size, say 600 for width and 400 for height. Also I have 2 images one has size 600(width) * 1 and one has dimension 1 * 400(height). Is there a way that I fit the first image to the container using width or max-width and the second one using height or max-height? Thanks.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
turns out there's another way to do this.
<img style="height: 100%; width: 100%; object-fit: contain;" />
will do the work. It's CSS3 stuff.
The img tag is the only element that can auto scale to match the image size.
Depending on your scenario you might be able to use a container width a fixed width & height and use background-size: contain.
Otherwise you have to use javascript and do the math yourself.
Is there a way that I fit the first image to the container using
width or max-width and the second one using height or max-height?
In short: no.
Here's an example with the img tag: http://jsfiddle.net/sn3uu0uw/2/
.body {
background: url("img_flwr.gif");
background-size: 100% auto;
background-repeat: no-repeat;
}
the above class will good enough for 600px width image.similarly write another class with background-size: auto 100%; which should be applicable for 400px height image.Apply the classes using jquery.
I want to make my image fit into a div without using any javascript and without letting the image stretch. I am unable to use the background-image property as I am using css transitions. Using
max-height:100%;
max-width:100%;
Works and is exactly what I want to do except for the scenario when the image is too small. I have considered enlarging the image to a certain height while maintaining the width and then applying max-height and max-width but this seems like a very hacky, time expensive solution if it even works at all. Are there any other suggestions?
Thanks
Kabeer
Display the image as block and it will fit to the parent container
wrap the image in a container and set this style for the image in it:
img {
display: block;
max-width: 100%;
max-height: 100%;
}
so it won't strech
here you have a fiddle
This fiddle is with smaller image than the container
You can try the following way which the image will inherit the height and width of its parent div
<div class="img-frame">
<img src="http://placekitten.com/g/200/300"/>
</div>
CSS
.img-frame{
width: 500px;
height: 500px;
overflow: hidden;
}
a img{
width : 100%;
height: auto;
}
Working Fiddle
Ok, it seems that there is no better solution so I will have to use the hacky solution I eluded to in the original question. For future people this is how I did it. lets say the container is 400px. Apply this css to the image:
height:400px; //set it to whatever the container height is
width:auto;
max-width:100%;
max-height:100%;
With this solution it will scale the image to the size of the container. It will then check the newly scaled image and set the max height to 100% which will stay at 400px. It will then set the max width to 100% which for a portrait image will do nothing if the image is landscape it will then set the width to the width of the container and it works. Also to centre the image after use:
margin:auto;
I apologise for answering my own question but I thought it would be useful for future people
I have a wrapper div that contains arbitrary content (I don't know its length). How can I put a background image that stretches its whole length since background-images doesn't stretch?
I've tried with a div containing a img tag. The div has a lover z-index that the rest of the content and has position: absolute. The problem is that the image is longer that the content and so it just makes it longer (the wrapper has overflow: auto).
<div id="wrapper">
<div id="image-wrapper" style="position: absolute"><img src="bg.jpg"></div>
[.. OTHER CONTENT ..]
</div>
If I set the div and the image's width and height to 100%, it takes the window's height, not the wrapper's.
Any help?
background-size is available since CSS3:
#image {
background-image: url("bg.png");
background-size: auto;
}
auto is the default value and does not stretch the image.
You can set the width and height manually:
#image {
background-size: 100% 100%;
}
or
#image {
background-size: 500px 300px;
}
The alternative: background-size: contain and background-size: cover.
contain stretches the image so that the image is as big as possible but completely visible within the element, whereas cover stretches the image to 100% width, regardless if the image is cropped at the top and/or the bottom.
But the different browsers are not completely consistent when rendering backgrounds with these keywords.
If you are willing to use JavaScript, check out Supersized. It seems to work well for this particular case.
you might also try html5 method on image.
#image-wrapper img {max-width: 100%}
Add position: relative to the styles for #wrapper.
http://css-tricks.com/absolute-positioning-inside-relative-positioning/