Question

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

Answer 1

我曾使用Perfect Full Page Background Image在之前的网站上完成此操作。

如果您只需要支持现代浏览器，则可以使用 background-size：cover; 。

Answer 2

这是一个老问题，但我想补充说，如果你想根据视口大小仅用css调整图像大小;你可以使用视口单元＆＃34; vh（视口高度）或vw（视口宽度）＆＃34;。

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

See browser supports

Answer 3

由于您无法调整高度，因此可以使用此功能。 http://jsfiddle.net/uf9bx/1/

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

我不确定您放置图像的大小或位置，但也许这会有所帮助！

Answer 4

将其设为背景图片且大于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%;
}

Answer 5

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

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

Answer 6

您关联的网站不会改变图片的宽度，但实际上会将其剪掉。为此，需要将其设置为背景图像。

有关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;
}

Answer 7

更改图像的宽度将自动更改高度...

您想拥有此功能的图片数量是多少？如果它很多并且它们都有不同的高度，你可能应该让高度也改变。

让我们说你有5张高度为400px的图片，在你的html中给那些五个标签固定的类

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

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

如何在浏览器宽度调整大小时自动调整图像大小但保持相同的高度？

7 个答案: