How To Auto Resize an Image to fit a div Container

How do I auto-resize an image to fit a div container

Someone give me an Question.

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?

Answer:

How to solve it ?, Here We Go..

Do not apply an explicit width or height to the image tag. Instead, give it:

max-width:100%;
max-height:100%;

Example: jsfiddle

img {
    max-width: 100%;
    max-height: 100%;
}
.portrait {
    height: 80px;
    width: 30px;
}
.landscape {
    height: 30px;
    width: 80px;
}
.square {
    height: 75px;
    width: 75px;
}

Portrait Div<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

I Hope This Article Be helped

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post