Member Avatar for seularts

I need some help with sizing an image in height. My page is tzr.ro, and as you can see in some browsers such as explorer and chrome the image height differs. So i have this small piece of code that i need to adjust:

img {
max-width : 350px;
height : 100%;
border : none;
}

So if you could give me a hint on how to modify this, I'd appreciate it :)

Thanks!

  • 2 Contributors
  • 3 Replies
  • 198 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by scottloway

Dani AI

Generated

The inconsistent heights come from using a percentage height on the image while its container doesn’t have a definite height. Percentage values look fine only when every ancestor has an explicit height; otherwise browsers compute them differently. observed the cross‑browser difference and was right to advise letting the browser preserve the aspect ratio rather than forcing both axes.

/* cap visible height, preserve aspect ratio (modern approach) */
img.limit-height {
  display: block;
  max-height: 40vh;    /* limit height relative to viewport */
  max-width: 100%;     /* prevent overflow in narrow containers */
  width: auto;         /* let width follow the image's aspect ratio */
  object-fit: contain; /* keeps the image contained without distortion */
}

Notes and troubleshooting:

  • Use a single constraint (either max-height or max-width) and let the other dimension scale automatically; that avoids stretching.
  • object-fit is handy for containment/cover effects but has limited support in very old browsers; with no support the max-* rules still keep the image proportional.
  • If percentage heights are needed, make sure every parent has an explicit height (otherwise percentage-based sizing will be inconsistent).
  • For legacy IE that lacks reliable max-* support, prefer server-side resized images or a fallback CSS approach.

If using Bootstrap, use the framework helper for responsive images (img-responsive in v3, img-fluid in v4+). For a fixed visual crop instead of scaling, wrap the image in a fixed-height element and use background-size:cover on that wrapper.

Recommended Answers

All 3 Replies

Member Avatar for scottloway

What you want here is height: auto; - also, you should note that max-width isn't properly supported in IE6 (though, you may not care about IE6).

Member Avatar for seularts

Thanks a lot, that did the trick :)

Edited by seularts because: n/a
Member Avatar for scottloway

Great! Would you mind please marking this thread as "solved"? Cheers!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.