如何在使用 CSS 调整大小时保持图像长宽比？-css教程-PHP中文网

如何在使用 CSS 调整大小时保持图像长宽比？

Patricia Arquette

发布： 2024-12-23 19:18:14

原创

157 人浏览过

How Can I Maintain Image Aspect Ratio During Resizing with CSS?

在调整图像大小期间保留纵横比

图像纵横比对于在调整大小时保持图像的原始比例至关重要。当图像具有预定义的宽度和高度属性并应用其他 CSS 规则时，此问题变得明显。

例如，在下面提供的代码中，图像“big_image.jpg”的高度和宽度明确定义为 600和 900 像素，分别：

<img src="big_image.jpg" width="900" height="600" alt="" />

登录后复制

要在保持宽高比的同时强制调整图像大小，可以采用 CSS 规则。在这种情况下，可以使用以下 CSS 规则：

img {
    max-width: 500px;
}

登录后复制

但是，此 CSS 规则可能无法将图像缩小到适当的大小。为了解决这个问题，应该使用额外的 CSS 属性：

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

登录后复制

使用这些 CSS 属性，图像“big_image.jpg”将调整大小，同时保留其纵横比。这通过以下 HTML 和 CSS 代码进行说明：

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.sstatic.net/aEEkn.png">

登录后复制

以上是如何在使用 CSS 调整大小时保持图像长宽比？的详细内容。更多信息请关注PHP中文网其他相关文章！