CODEWITHSUNDEEP
cssresponsive-design
cyberwombat
cyberwombat

Reputation: 40064

Responsive image with max height

I would like, using CSS only, to have an image stretch to the max width of a container div, keeping aspect ratio, without using background images. However, if the height of the image exceeds X then it should be limited by that. The following doesn't cause the image to go 100%. If I set that then it becomes stretched if the height exceeds 200px.

.container {
   width: 200px;    
   position: relative;
}
img {
  position: relative;
  max-width: 100%;
  max-height: 200px;
}

<div class="container"><img src=""></div>

Here's a fiddle to play with: http://jsfiddle.net/cyberwombat/agfy1cfm/4/

Upvotes: 1

Views: 7996

Answers (2)

user12695014
user12695014

Reputation:

I suggest to use instead this, more flexible:

img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

With this, you can use whatever aspect-ratio image you want, being sure that the images will remain responsive

Upvotes: 0

Huey
Huey

Reputation: 5220

Try just setting the height:

img {
  position: relative;
  max-width: 200px;
  max-height: 50px
}

where the values of max-width and max-height match the dimensions of the container.

Upvotes: 2

Related Questions