仅按宽度或高度缩放图片及Chrome浏览器兼容问题咨询

嗨，这个问题是不同浏览器对图片尺寸属性的默认解析逻辑差异导致的，咱们分两个场景来解决：

一、修正Chrome仅设置width时的高度同步缩放行为 #

你遇到的Chrome不自动缩放高度的问题，本质是Chrome对HTML原生width属性的处理更“保守”——当只设置width时，它不会自动根据图片原始宽高比计算高度，而Firefox/IE会默认做这个计算。要让Chrome和其他浏览器表现一致，只需要给图片加上**height: auto**的CSS样式：

示例代码 #

<!-- 内联样式写法 -->
<img src="#" width="42" style="height: auto;">

<!-- 或者用CSS类（更适合批量处理） -->
<style>
  .responsive-img {
    height: auto;
  }
</style>
<img src="#" width="42" class="responsive-img">

这样设置后，Chrome会根据你指定的宽度和图片原始宽高比，自动计算并缩放高度，和Firefox/IE的行为完全一致。

二、实现仅按高度缩放图片 #

你说仅设置height属性未生效，同样是因为浏览器默认不会自动推导宽度。解决思路和上面相反：给图片加上**width: auto**的CSS样式，强制浏览器根据高度和原始宽高比计算宽度：

示例代码 #

<!-- 内联样式写法 -->
<img src="#" height="60" style="width: auto;">

<!-- CSS类写法 -->
<style>
  .height-responsive {
    width: auto;
  }
</style>
<img src="#" height="60" class="height-responsive">

进阶：用aspect-ratio精确控制（现代浏览器） #

如果你的图片有固定的宽高比（比如1:1、16:9），还可以用CSS的aspect-ratio属性来更灵活地控制缩放，不管设置width还是height，都会严格按比例调整：

<style>
  .fixed-ratio-img {
    aspect-ratio: 4/3; /* 替换成你的图片实际宽高比 */
    width: auto; /* 或 height: auto; 按需设置 */
  }
</style>
<img src="#" height="60" class="fixed-ratio-img">

这个属性支持Chrome、Firefox等现代浏览器，IE不支持，但如果你的场景不需要兼容IE，这会是更优雅的方案。

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