css - 使用 CSS 使图像按比例放大和缩小

Question

我的网站标题中有一张图片。我想使用 CSS 属性使其横跨浏览器的宽度，以便它对用户调整浏览器窗口大小使用react，并相应地缩放图像的垂直轴。这真的可以做到吗？

Answer 1

百分比将使图像保持整个宽度，并在浏览器调整大小时更新图像。

如果你想让图像总是被拉伸(stretch)，你可以使用:

img {
    width:100%;
}

但是，这很容易使图片看起来像垃圾。更安全的方法可能是:

img {
    max-width:100%;
}

无论哪种方式都会使图像随着浏览器调整大小而改变大小。但是，第二个不会将图像拉伸(stretch)到超过其自然大小，因此它看起来不会变形。