CODEWITHSUNDEEP
cssimageheightwidthaspect-ratio
KP83
KP83

Reputation: 646

Why can't i maintain aspect ratio with max height value?

I use a class for my portrait and landscape images. All my landscape images have the same size of 1400x1000px (700x500px 5K retina proof). And i want the portrait images always to be 700px in height and width set to auto, but it doesn't seem to work that way. Why?

.size-m { /* project image portrait */
  max-height: 700px;
  width: auto;
 }

.size-xl { /* project image landscape */
 max-width: 700px;
 height: auto;
}

Upvotes: 0

Views: 417

Answers (2)

jameson
jameson

Reputation: 201

I might be misunderstanding, but this appears to be working fine in these jsfiddles:

landscape

img {
  max-width: 700px;
  height: auto;
}

portrait

img {
  max-height: 700px;
  width: auto;
}

Upvotes: 1

fauverism
fauverism

Reputation: 1992

Add display: block to your classes. That should do the trick.

Upvotes: 0

Related Questions