如何使用HTML IMG标记保持宽高比

7 回答

• 42

  将图像包裹在尺寸为64x64的 div 中，并将 width: inherit 设置为图像：

  <div style="width: 64px; height: 64px;">
      <img src="Runtime path" style="width: inherit" />
  </div>
  

  回复于 2024-05-03T04:16:58+08:00
• 97

  为什么不使用单独的CSS文件来维护要显示的图像的高度和宽度？这样，您就可以提供宽度和高度 .

  例如：

  image {
         width: 64px;
         height: 64px;
         }
  

  回复于 2024-05-03T04:16:58+08:00
• 33

  将 width 和 height 的图像设置为 auto ，但同时限制 max-width 和 max-height ：

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

  Fiddle

  如果要在64x64px "frames"中显示任意大小的图像，可以使用内联块包装和定位，如in this fiddle .

  回复于 2024-05-03T04:16:58+08:00
• 9

  列出的方法都没有将图像缩放到适合框的最大可能尺寸，同时保留所需的宽高比 .

  这不能用IMG标签完成（至少没有一点JavaScript），但可以按如下方式完成：

  <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>
  

  回复于 2024-05-03T04:16:58+08:00
• 0

  不要设置高度和宽度 . 使用其中一个，将保持正确的宽高比 .

  .widthSet {
      max-width: 100px;
  }
  
  .heightSet {
      max-height: 100px;
  }
  

  <img src="http://placehold.it/200x250" />
  
  <img src="http://placehold.it/200x250" width="64" />
  
  <img src="http://placehold.it/200x250" height="64" />
  
  <img src="http://placehold.it/200x250" class="widthSet" />
  
  <img src="http://placehold.it/200x250" class="heightSet" />
  

  回复于 2024-05-03T04:16:58+08:00
• 1

  这是样本之一

  div{
     width: 200px;
     height:200px;
     border:solid
   }
  
  img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      }
  

  <div>
    <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
  </div>
  

  回复于 2024-05-03T04:16:58+08:00
• 33

  <img src="Runtime Path to photo" style="border: 1px solid #000; max-width:64px; max-height:64px;">
  

  回复于 2024-05-03T04:16:58+08:00