I want to show the full image regardless of its dimensions in a div. The dimensions of the div are: Width:400px and Height:400px [400x400] . So even if an image is larger than the div, I want the entire image to be displayed in the div. the image should maintain its aspect ratio. How can I achieve this with CSS or jQuery? Is this possible without manipulating the image with PHP or any other script?

[Sorry for incorrect grammar or bad english]

I want to show the full image regardless of its dimensions in a div. The dimensions of the div are: Width:400px and Height:400px [400x400] . So even if an image is larger than the div, I want the entire image to be displayed in the div. the image should maintain its aspect ratio. How can I achieve this with CSS or jQuery? Is this possible without manipulating the image with PHP or any other script?

[Sorry for incorrect grammar or bad english]

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Feb 11, 2017 at 21:53 SomenameSomename 3,4441717 gold badges4747 silver badges8585 bronze badges 2

• So you want the div to expand with the image or? – AndrewL64 Commented Feb 11, 2017 at 21:57
• Sorry. No. The div should remain static. The image should adjust according to the div. I can get the image to fill 100% of width and not go any more in width, but if the image is more in height, the height of the div increases. I want the div to be static and not changing as per the image. – Somename Commented Feb 11, 2017 at 21:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

If you add it as a background you can add:
background-size: contain;

If you use img tags, then:
object-fit: contain;

For better patibility with older browsers, you should use the background method.

---

Edit:
Just wanted to put this here, in case someone else needs it:

1. No object-fit: https://jsfiddle/ke8yu22d/

2. With object-fit: https://jsfiddle/yf5psqyL/

3. As background: https://jsfiddle/vqy316L6/

height:160px;
width:160px;
background-image: url('images/Science.png');
background-position:center center;
background-repeat:no-repeat;
background-clip:content-box;