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

Posted 2023-03-05

【中文标题】如何在浏览器宽度调整大小但保持相同高度时自动调整图像大小？

【英文标题】：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;）

看起来你链接到的网站上的图片实际上并没有改变图片的大小，它只是把它剪掉了。在这种情况下，您只想像他们一样使用背景图像。

【参考方案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/cs-s-ref/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 

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