Html 如何在浏览器宽度调整时自动调整图像大小但保持相同的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17324928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to resize image automatically on browser width resize but keep same height?
提问by Ned
I am trying to replicate the same effect that this website has: http://www.knockknockfactory.com/
我试图复制该网站具有的相同效果：http: //www.knockknockfactory.com/
When the browser width is resized the image automatically gets smaller but the height of the area in which it occupies stays the same.
调整浏览器宽度时，图像会自动变小，但其所在区域的高度保持不变。
When i try to replicate this, my image also gets smaller but the height changes?
当我尝试复制这个时，我的图像也变小了，但高度发生了变化？
My code so far is:
到目前为止我的代码是：
<div id="image"><img src="cover.png" /></div>
CSS:
CSS：
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
How do i get my image to decrease/increase upon browser resize but still keep the same height using CSS like on that website?
如何让我的图像在浏览器调整大小时减少/增加，但仍然像在该网站上一样使用 CSS 保持相同的高度？
采纳答案by Jeremy Gallant
I've used Perfect Full Page Background Imageto accomplish this on a previous site.
我在以前的网站上使用了完美的整页背景图像来完成此操作。
You can use background-size: cover;if you only need to support modern browsers.
您可以使用背景大小：封面；如果您只需要支持现代浏览器。
回答by eren130
It is an old question but i want to add that if you want to resize image according to viewport size only with css; you can use viewport units "vh (viewport height) or vw (viewport width)".
这是一个老问题，但我想补充一点，如果您只想使用 css 根据视口大小调整图像大小；您可以使用视口单位“vh（视口高度）或 vw（视口宽度）”。
.img {
width: 100vw;
height: 100vh;
}
回答by Matt
Since you are having trouble adjusting the height you might be able to use this. http://jsfiddle.net/uf9bx/1/
由于您在调整高度时遇到问题，因此您可以使用它。 http://jsfiddle.net/uf9bx/1/
img{
width: 100%;
height: 100%;
max-height: 300px;
}
I'm not sure exactly what size or location you are putting your images but maybe this will help!
我不确定您放置图像的确切尺寸或位置，但也许这会有所帮助！
回答by Derek Story
Make it a background image and larger than 100% to get the desired effect: http://jsfiddle.net/derekstory/hVM9v/
使其成为背景图像并大于 100% 以获得所需的效果：http: //jsfiddle.net/derekstory/hVM9v/
HTML
HTML
<div id="image"></div>
CSS
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%;
}
回答by bob
changing the width of the image will automatically change the height...
改变图像的宽度会自动改变高度...
how many pictures do you want to have this functionality? If it's a lot and they all have DIFFERENT Heights you should probably just let the height change as well.
你想要多少张图片有这个功能？如果它很多而且它们都有不同的高度，你可能应该让高度也改变。
Lets say you have 5 images that have height 400px , in your html give those five tags the class of fixed
假设您有 5 张高度为 400px 的图像，在您的 html 中为这五个标签指定固定类
.fixed { width: 100%; height: 500px !important }
This should let the width change but keep the height the same.
这应该让宽度改变但保持高度不变。
回答by Mohammad Areeb Siddiqui
The website you linked doesn't changes the image's width but it actually cuts it off. For that it needs to be set as a background-image.
您链接的网站不会改变图像的宽度，但实际上会切断它。为此，需要将其设置为背景图像。
For more info about background-imagelook it at http://www.w3schools.com/cssref/pr_background-image.asp
有关background-image查看它的更多信息，请访问http://www.w3schools.com/cssref/pr_background-image.asp
Usage:
用法：
#divID {
background-image:url(image_url);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
回答by vendettamit
You should learn about the Media queries for CSS. The site you referring to is using the same. The site is basically using the different CSS everytime the browser window size is changining. Here's the link for samples
您应该了解 CSS 的媒体查询。您所指的网站正在使用相同的网站。每次浏览器窗口大小发生变化时，该站点基本上都使用不同的 CSS。这是示例的链接
