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

【问题标题】：How to resize image automatically on browser width resize but keep same height?如何在浏览器宽度调整大小但保持相同高度时自动调整图像大小？
【发布时间】：2013-06-23 21:05:41
【问题描述】：

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

【问题讨论】：

只使用width:100%; 高度也应该是固定高度，以像素为单位（例如height:100px;）
看起来你链接到的网站上的图片实际上并没有改变图片的大小，它只是把它剪掉了。在这种情况下，您只想像他们一样使用背景图像。

标签： html css image resize

【解决方案1】：

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

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

【讨论】：

谢谢！这正是我想要的，而不是使用大量的媒体查询，我只需要在宽度非常小的时候使用一些

【解决方案2】：

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

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

See browser supports

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

谢谢你这也创造了我想要的

【解决方案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%;
}

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案7】：

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

您希望多少张图片具有此功能？如果它很多并且它们都有不同的高度，你可能应该让高度也改变。

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

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

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

【讨论】：