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
Related
Looking for a technique for controlling an tag's aspect ratio. aspect-ratio property isn't supported enough for use at the time of this post.
Generally I would wrap the element in a a container and apply a padding top to create the effect needed. However, the content this I have is inline with other content and I can't touch the html.
The container width that the image is responsive so enforcing height and width directly isn't an option.
For example having an image keep 16:9 ratio within a container. It doesn't matter about the visual scale of the image. I will get the image to adjust with
object-fit: cover
Is there a current technique that would work on just the img tag itself?
It is an aspect ratio problem. Unfortunately CSS on img tag to use the aspect-ratio technique needs a div container. I had a similar problem that I solved using css as soon as:
.img {
display: table-cell;
max-width: ...;
max-height: ...;
width: 100%;
}
Since you can't use the padding tweak, I assume that you can't use javascript either.
If you are only able to work on the img tag, the only solution I'd see that would be close to what you aim to achieve would be :
.yourImage {
width : 100%;
height: 100%;
object-fit: contain;
}
https://caniuse.com/#search=object-fit
You could decide width based on the viweport, as
.theImage {
width: 20vh;
height: auto;
}
or some other variation of it.
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.
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.
bootstrap 3 includes the .img-responsive class
which applies these css settings
display: block;
height: auto;
max-width: 100%;
why is there no max-height:100%;?
I found adding this makes the pictures fit in terms of height as-well, but I'm not sure why it's being left out and not sure what the consequences are across other browsers.
Try something like this: http://bootply.com/86201.
max-height:100% only fills the height of the viewport. While height:auto fills the available space (also below the viewport when scrolling down).
So height:auto seems more consistent with the grid based on width and a vertical scrollbar.
On a screen with small width and height images can became small with max-height:100% and not useful.
Note in the case you give the parent a fixed height and using max-width: 100%; and max-height:100%; for your images will help to resize the image and keep the aspect ratio:
http://bootply.com/86203 which is possible the answer you are looking for.