CSS/HTML5 响应式标题图片答案

【问题标题】：CSS/HTML5 Responsive Header ImageCSS/HTML5 响应式标题图片
【发布时间】：2013-10-27 19:57:09
【问题描述】：

我希望我的标题图片可以随浏览器大小缩放。这是我当前的 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

<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-->

第二张图片大致是在较小的显示器上显示的，图片没有缩放，布局看起来很奇怪 - 我想缩放马头，以便完整的图像仍然显示。它似乎适用于 Android 和平板电脑，而不是更小的显示器？

【问题讨论】：

抱歉，我很难解释您的问题。您是在问如何使背景图像也垂直缩放？
请提供jsBin 示例。
&屏幕分辨率比我高，而且大图像无法缩放以显示她的全部？
我从未使用过 jsBin - 抱歉。

标签： css html image responsive-design

【解决方案1】：

像这样将id输入到div中（只用一个div）

HTML：

<div id="header"> </div>

CSS：

#header{
  background-image:url(../images/liveryHeader3.jpg);
  background-size: 100% 100%;
}

OBS：进入背景尺寸，第一个值是宽度，第二个是高度

【讨论】：

【解决方案2】：

试试这个（它适合图像的大小，使其完全覆盖屏幕。）：

.header-image img {
    width: 100% !important;
}

示例：http://jsfiddle.net/leo/qsMKf/

【讨论】：

【解决方案3】：

如果您将实际图像作为背景元素放入 css 中，然后设置 background-size 以包含它应该使其适合确切的屏幕尺寸。

类似这样的：

.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;
}

看看情况如何。

【讨论】：

会试试那个 Rhys ty。
Rhys 对我来说仍然没有乐趣，也许是我的屏幕/分辨率大小让它对我来说“不可见”？（运行 2560*1440 的 24 英寸屏幕）- 我之前尝试过 :cover; 变体，但没有成功。

【解决方案4】：

我希望我明白你真正想要什么。

您必须在您的图像及其父级上将最大宽度设置为 100%。

所以这些元素的 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%; 
}

【讨论】：

我理解你的回答。我将最大高度设为 1000 像素（或大约 80%）的原因是为了让像我这样的更大屏幕的“更多图像”。我可能必须简单地缩短图像才能使其按传统方式缩放。（而不是使用小于 100% 的最大高度和隐藏溢出）& 让边框属性保持 10 像素而不是图像内边框。

【解决方案5】：

您的图片不会随着 width:100% 缩小；它只会按比例放大，因此无论图像大小如何，它都会保留。您需要使用“媒体查询”，然后在那里设置不同的 %。

类似：

/* 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 % */
}

【讨论】：

我不确定？ “使用 % 将背景图像替换为较小的图像或通过 % 缩小尺寸”
意味着将图像重新保存为宽度小 50% 并在 css 声明中调用它，这样 100% 的宽度将小于当前文件的 100%，或者只是保留您拥有相同的图像，但指定了不同的 % 来“放置”它。这个想法是加载一个较小的文件。如果您选择其他选项，较小的设备将下载较大的文件，然后将其缩小，但看起来可能不如实际保存较小的文件。
会试试那个 Kelly ty。

【解决方案6】：

您提供的代码不会像屏幕截图那样缩放图像，因此您首先应该查看它真正被拉伸的位置

无论如何，请在 css 中检查 max-height:1000px; - 这可能会有所限制，当然您也应该将 width:100%;height:100%; 添加到您的图像和外部 div 中

【讨论】：

不确定您的意思？您提供的代码不会像在屏幕截图中看到的那样缩放图像图像是 2600 * 1405
@scotia 我的意思是只有这段代码不会缩放图像，应该有更多的东西，也许是额外的 css 或 js