自动调整图片大小以适应比例但不拉伸

Question

我想根据屏幕大小调整图像的大小，但当屏幕太大时，我不希望该图像超过其实际像素。到目前为止，我已经做到了这一点。

<div align="center" style="position:static; height: 100%; width: 100%; top:0;left 0;">
<img src="myImg.png" style="width: 80%">
</div>

这样可以保持我想要的比例，但当屏幕过大时，它也会拉伸图像。我不想要那样。

- ThanosFisherman

Answer 1

响应式图片的CSS如下：

    max-width: 100%;
    height: auto;

这将使图像随其容器大小缩小，而不超过图像的自然宽度。但是，使用width: 100%;将强制图像与其容器一样宽，无论图像的实际大小如何。

还有几点需要注意:

• align="center"已被弃用。您应该使用CSS对齐内容，因此使用text-align: center;。
• 使用position: static;是不必要的，因为它是位置属性的默认值。我想到唯一需要使用它的时候是如果你需要覆盖其他CSS。
• 除非您绝对定位div（您没有这样做），否则top: 0; left: 0;将不起作用。

在未看到您的代码其余部分的情况下，我认为这将是实现您想要的效果的最佳解决方案:

    <div style="text-align: center;">
       <img src="myImg.png" style="max-width: 100%; height: auto;" alt="FYI, image alt text is required" />
    </div>

- ns1234

Answer 2

如果您设置了max-width属性，它将限制图像的最大尺寸。就像这样：

<div align="center" style="position:static; height: 100%; width: 100%; top:0;left 0;">
    <img src="myImg.png" style="width: 80%; max-width: 300px;">
</div>

你可以将max-width的值设置为任何你想要的大小，只要它不超过图片的实际宽度。同样适用于高度。

- Laura Vaca

Answer 3

class="img-thumbnail" 

可能是解决方案。

- mumukulux

---

现在在Bootstrap 4中，“img-fluid” - slothstronaut

没有任何迹象表明正在使用任何框架，更不用说Bootstrap了。 - John E