IE11中图片显示拉伸/缩放，Chrome/Firefox正常，求解决方法

Hey there! I’ve run into this exact IE quirk before—those older browsers can be real sticklers when it comes to preserving image aspect ratios. Let’s break down how to fix that stretching problem:

Common Fixes to Try First #

• Enforce Aspect Ratio with CSS: IE often ignores implicit aspect ratio rules, so explicitly tell it to respect the image’s natural dimensions. Add this to your CSS for all images on the page (or target specific image containers if needed):

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

  This ensures images scale down to fit their container without stretching vertically or horizontally.

• Remove Hardcoded Width/Height Attributes: Check if your <img> tags have inline width or height values (like <img src="..." width="500" height="300">). These fixed values can force IE to stretch the image even when the container is smaller. Swap them out for CSS-based sizing instead.

• Adjust Container Constraints: If the parent container of the image has a fixed height set, IE might stretch the image to fill that height regardless of its width. Remove any fixed height on the container, or use min-height/max-height instead if you need vertical limits.

For Older IE Versions (IE8 and Below) #

If you still need to support super old IE versions, add this CSS hack to cover edge cases:

img {
  /* Fallback for IE8 */
  *width: auto;
}

The asterisk targets only IE8 and below, forcing it to use the image’s natural width instead of inheriting a stretched value.

If It’s Still Not Working #

If none of the above fixes the issue, share a bit more of your full HTML/CSS (especially the code around the images and their parent containers)—sometimes there’s a hidden style (like float or position: absolute) that’s throwing IE off balance.

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