Question

我希望图片跨越网页的全宽（980px到2000px +）。当我只为图像指定宽度：100％时，为了保持宽高比，对于大尺寸屏幕，图像的高度也变得相当大。

<img src="imageFileName.jpg" width=100% />

为避免高度问题，我看到许多网站放大图片，宽度保持在网页的100％，并保持高度固定。

任何人都可以告诉我如何放大图像，以便我可以保持图像的高度固定，并使图像扩展到页面宽度的100％。缩放部分有助于保持纵横比一致。

如果只有css解决方案真的很棒。谢谢。（我无法通过谷歌搜索找到答案，所以在这里发帖提问）

Answer 1

创建一个具有所需宽度和高度的div元素。然后将图像设置为该div的背景。然后你可以根据需要跨越背景。

div {
    background: url(img_flwr.gif);
    background-size: cover;
    background-repeat: no-repeat;
}

Answer 2

您可以使用jquery来修复图像100％高度

<img src="imageFileName.jpg" width=100% id="image"/>


function img_height()
{
  $("#image").height($(window).height());
}

$(window).scroll(img_height);
$(window).resize(img_height);

您也可以使用$("#page_width").height()代替$(window).height()

如何放大100％页宽图像以保持固定高度

2 个答案: