如何在不拉伸图片的前提下调整高度？缩小尺寸时图片拉伸问题咨询

I get it—you want to set a fixed height for your image while keeping its aspect ratio intact, but object-fit: cover fails in Internet Explorer, and just setting width:100% + height:60vh stretches the image. Let's fix this with reliable, cross-browser approaches that work even in older IE versions (IE9+):

Workaround 1: Positioned Image with Centering & Cropping #

This method uses a container as a viewport, then positions the image inside to maintain its ratio and crop overflow. Here's the code:

.container {
  width: 100%;
  height: 60vh;
  overflow: hidden; /* Hide image parts that exceed the container */
  position: relative;
}

.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  min-width: 100%; /* Ensure image covers container width */
  min-height: 100%; /* Ensure image covers container height */
  transform: translate(-50%, -50%); /* Center image perfectly */
}

How it works: #

• The container locks in your desired 60vh height and hides any image parts that go beyond its bounds.
• The image is centered absolutely using transform, which is supported in IE9 and above.
• If you want to prioritize filling the container's width instead of height, swap to width:100%; height:auto; and adjust the min-values accordingly.

Workaround 2: Background Image Fallback #

If the image is decorative and doesn't need to be an <img> tag (for SEO or accessibility), using a background image is simpler and IE-friendly:

.container {
  width: 100%;
  height: 60vh;
  background-image: url('your-image-path.jpg');
  background-size: cover; /* Mimics object-fit: cover behavior */
  background-position: center; /* Center the image within the container */
}

Just keep in mind that background images aren't as SEO-friendly as <img> tags, so use this only when appropriate.

Both methods will prevent stretching and preserve your image's aspect ratio, even in Internet Explorer.

内容的提问来源于stack exchange，提问作者Light_Warrior