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

Question

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

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

这保持了我想要的比例，但是当屏幕太大时，它也会拉伸图像。我不希望这样。

Answer 1

响应式图像的css如下：

.

这将使图像缩小其容器的大小，而不会超出图像的自然宽度。但是，使用 max-width: 100%; height: auto; 将强制图像与其容器一样宽，而不管图像的实际大小。

其他几点说明：

• width: 100%;已弃用。您应该使用css来对齐内容，因此align="center"。
• 使用text-align: center;是不必要的，因为它是position属性的默认值。我唯一能想到你需要使用它的地方就是你需要覆盖其他一些css。
• 除非你绝对定位你的div（你不是），否则position: static;将什么都不做。

如果没有看到你的其余代码，我认为这将是你想要实现的目标的最佳解决方案：

top: 0; left: 0;

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设为任意大小。高度也可以。

Answer 3

class="img-thumbnail" 

可能是解决方案。