使用CSS可以使图像向上和向下缩放

Question

我的网站标题中有一个图像.我想使用CSS属性使其在浏览器的宽度上伸展,以便它对用户调整浏览器窗口大小作出反应,从而相应地缩放图像的垂直轴.这实际上是可以做到的吗？

Answer 1

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

如果您希望图像始终拉伸,您可以使用:

img {
    width:100%;
}

但是,这可以很容易地使图像看起来像完全废话.更安全的方式可能是:

img {
    max-width:100%;
}

无论哪种方式都可以通过浏览器调整大小来改变图像大小.然而,第二个不会拉伸图像超过它的自然尺寸,所以它看起来不会变形.

Answer 2

您可以将宽度和高度属性设置为百分比（例如，100% 的宽度将导致图像在页面上拉伸）。这可以使用 CSS 来完成。