Html CSS/HTML5 响应式标题图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19458710/
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
CSS/HTML5 Responsive Header Image
提问by scotia
I'd like my header image to scale with the browser size. This is my current code for the att. screen grab, but this doesn't scale the image on smaller screens. Ive tried using the background image options but this doesn't achieve the look I want.
我希望我的标题图片随着浏览器的大小而缩放。这是我当前的 att 代码。屏幕抓取，但这不会在较小的屏幕上缩放图像。我试过使用背景图像选项，但这并没有达到我想要的效果。
.header-image {
position:absolute;
top:0;
bottom:0;
max-height:1000px;
overflow:hidden;
left: 0;
right: 0;
z-index:-1;
border:10px solid #545351;
}
.header {
width: 100%;
padding-top:50px;
margin-top:-10px;
}
& HTML
& HTML
<div align="center"><!-- big image -->
<div class="header-image"><img src="images/liveryHeader3.jpg"></div><!-- end of big image-->
</div><!-- end of center image class-->
The second image is roughly what shows on smaller monitor, the image hasn't scaled & layout looks odd - Id like to scale the horse head so that the full image still shows. It seems to work on Android & tablet, just not smaller monitors?
第二张图像大致是在较小的显示器上显示的图像，图像没有缩放，布局看起来很奇怪 - 我想缩放马头，以便仍然显示完整的图像。它似乎适用于 Android 和平板电脑，只是不适用于较小的显示器？
回答by Leonard
Just try this (It fits the size of the image so that it exactly covers the screen.):
试试这个（它适合图像的大小，使其完全覆盖屏幕。）：
.header-image img {
width: 100% !important;
}
Example: http://jsfiddle.net/leo/qsMKf/
回答by Rupeck
input the id into div like this (use only one div)
像这样将id输入到div中（只使用一个div）
HTML:
HTML：
<div id="header"> </div>
CSS:
CSS：
#header{
background-image:url(../images/liveryHeader3.jpg);
background-size: 100% 100%;
}
OBS: into background-size, the first value is to width and second is to height
OBS：进入background-size，第一个值是宽度，第二个是高度
for more information : http://www.w3schools.com/default.asp
回答by kelly johnson
Your image won't scale down with width:100%; it will only scale up so whatever the size is of the image it will stay. You need to use a "media query" and then set a different % there.
您的图像不会按 width:100% 缩小；它只会放大，因此无论图像的大小如何，它都会保留。您需要使用“媒体查询”，然后在那里设置不同的 %。
Something like:
就像是：
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* put your specific styling here either replacing the background image with something smaller using % or sized down via % */
}
回答by Stewartside
If you put the actual image into the css as a background element and then set background-size to contain it should make it fit to the exact screen size.
如果您将实际图像作为背景元素放入 css 中，然后将 background-size 设置为包含它应该使其适合确切的屏幕尺寸。
something like this:
像这样：
.header-image {
position:absolute;
top:0;
bottom:0;
max-height:1000px;
overflow:hidden;
left: 0;
right: 0;
z-index:-1;
border:10px solid #545351;
background: url(*IMAGE URL HERE*) no-repeat;
background-size: cover;
}
See how that goes.
看看情况如何。
回答by service-paradis
I hope i understand well what you really want.
我希望我明白你真正想要什么。
You have to set max-width at 100% on your image and on it parent.
您必须在图像及其父级上将 max-width 设置为 100%。
So your css for those element would look like this:
因此，这些元素的 css 将如下所示：
.header-image {
position:absolute;
top:0;
bottom:0;
max-height:1000px;
max-width:100%;
overflow:hidden;
left: 0;
right: 0;
z-index:-1; /*places header image behind text */
border:10px solid #545351;
}
.header-image img {
max-width:100%;
}
回答by I?ya Bursov
code you provided doesn't scale image as it seen on screenshot, so you first should look at place where it is really stretched
您提供的代码不会像在屏幕截图上看到的那样缩放图像，因此您首先应该查看它真正被拉伸的地方
anyway, check max-height:1000px;in css - this can limit, and of course you should add width:100%;height:100%;to your image and outer div as well
无论如何，检查max-height:1000px;css - 这可以限制，当然你也应该添加width:100%;height:100%;到你的图像和外部 div 中
