我试图复制与该网站相同的效果: http://www.knockknockfactory.com/
当调整浏览器宽度时,图片会自动变小,但所占区域的高度保持不变。
当我尝试复制这个效果时,我的图片也变小了,但高度却发生了变化?
目前我的代码是
<div id="image"><img src="cover.png" /></div>
CSS:
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
如何像该网站那样使用 CSS 使图像在浏览器调整大小时减小/增大,但高度保持不变?
你应该了解一下 CSS 的媒体查询。你提到的网站使用的就是这种方法。基本上,每当浏览器窗口大小发生变化时,网站就会使用不同的 CSS。 以下是示例链接
您所链接的网站并没有改变图片的宽度,而是将其截断了。为此,需要将其设置为背景图片。
有关 "背景图片 "的更多信息,请访问 http://www.w3schools.com/cssref/pr_background-image.asp 。
使用方法:
#divID {
background-image:url(image_url);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}