有没有办法指定图像的最大高度或最大宽度？

Question

有没有办法在最大宽度或最大高度下保持以下纵横比，以下是我面临的情况。最大宽度或高度应为 500px

400x300 image - no resizing (both sides below 500 maximum size)
500x500 image - no resizing (both sides at exactly 500 maximum size).
600x400 image - resize to 500x333 (preserves same ratio) as one side is over 500 pixels.
1000x1200 image -resize to 417x500 (preserves same ratio), as both sides are over 500 pixels

Answer 1

将 CSS 属性 max-width 和 max-height 设置为限制值，同时将图像保留为 auto 因为它是 width 和 height 可用于在限制最大尺寸的同时保持宽高比，如下所示：

img {
  display: block;
  width: auto;
  height: auto;
  max-width: 500px;
  max-height: 500px;
}

<img src="https://via.placeholder.com/50x50" />
<img src="https://via.placeholder.com/500x100" />
<img src="https://via.placeholder.com/100x500" />
<img src="https://via.placeholder.com/1000x200" />
<img src="https://via.placeholder.com/200x1000" />

大于 500 像素的图片将调整大小以适应限制，而较小的图片将保留其原始大小。

有没有办法指定图像的最大高度或最大宽度？

Is there a way to specify either max height or max width for an image?

html

css

responsive-design

responsive-images