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

Question

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

Answer 1

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

如果您希望图片始终拉伸，可以使用：

img {
    width:100%;
}

但是，这很容易使图像看起来像完全废话。更安全的方式可能是：

img {
    max-width:100%;
}

无论哪种方式都可以通过浏览器调整大小来改变图像大小。但是，第二个不会将图像拉伸超过它的自然尺寸，因此看起来不会变形。

Answer 2

您可以将width和height属性设置为百分比（例如，宽度为100％会导致图像在整个页面中拉伸）。这可以使用CSS完成。

Answer 3

CSS当然可以拉伸图像（或者，至少，我已经在Firefox中使用它来执行以下操作： http://www.davidrhysthomas.co.uk/mindez/borked.html）：

img {height: 100%;
    width: 100%;
    min-height: 600px;
    min-width: 800px;
    }

例如。

但是......我认为它会对视口大小做出反应，调整JS可能是你的好朋友。

Answer 4

在这里，只需将此CSS样式应用于包含图像的元素即可。在此示例中，图像位于页面正文的背景上：

body
{
margin: 0;
padding: 0;
width: 100%;
background: url(images/YOUR-IMAGE.JPG) no-repeat left top;
background-size: 100%;
}

这将最大化整个元素的图像。调整窗口大小将缩放图像以适应浏览器的新窗口大小