How to fit image to div without using javascript

Question

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

Answer 1

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

Answer 2

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

Answer 3

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