9

我正在尝试复制与该网站相同的效果：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 保持相同的高度？

4

7 回答 7

4

我在以前的网站上使用了完美的整页背景图像来完成此操作。

您可以使用背景尺寸：封面；如果您只需要支持现代浏览器。

于 2013-06-26T16:02:23.553 回答
3

这是一个老问题，但我想补充一点，如果您只想使用 css 根据视口大小调整图像大小；您可以使用视口单位“vh（视口高度）或 vw（视口宽度）”。

.img {
width: 100vw;
height: 100vh;
}

查看浏览器支持

于 2015-11-12T13:10:22.430 回答
2

由于您在调整高度时遇到问题，您可以使用它。 http://jsfiddle.net/uf9bx/1/

img{
width: 100%;
height: 100%;
max-height: 300px;
}

我不确定您放置图片的确切尺寸或位置，但也许这会有所帮助！

于 2013-06-26T16:08:52.480 回答
1

使其成为背景图像并大于 100% 以获得所需的效果：http: //jsfiddle.net/derekstory/hVM9v/

HTML

<div id="image"></div>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#image {
    width: 100%;
    height: 500px;
    background: #000 url('http://static.ddmcdn.com/gif/dog-9.jpg') center no-repeat;
    background-size: auto 200%;
}
于 2013-06-26T16:05:51.953 回答
0

您应该了解 CSS 的媒体查询。您所指的网站使用的是相同的。每次浏览器窗口大小发生变化时，该站点基本上都使用不同的 CSS。这是样品的链接

http://css-tricks.com/css-media-queries/

于 2013-06-26T16:01:18.887 回答
0

您链接的网站不会改变图像的宽度，但实际上会切断它。为此，它需要设置为背景图像。

有关background-image查看它的更多信息，请访问 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;
}
于 2013-06-26T16:02:52.710 回答
0

改变图像的宽度会自动改变高度...

你想要多少张图片有这个功能？如果它很多并且它们都有不同的高度，你可能应该让高度也改变。

假设您有 5 个高度为 400px 的图像，在您的 html 中将这五个标签的类别设为固定

.fixed { width: 100%; height: 500px !important }

这应该让宽度改变但保持高度不变。

于 2013-06-26T16:06:26.350 回答