2

我希望我的标题图像与浏览器大小一起缩放。这是我当前的 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 和平板电脑，而不是更小的显示器？

4

6 回答 6

2

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

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

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

于 2013-12-07T20:28:04.883 回答
1

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

HTML：

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

CSS：

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

OBS：进入background-size，第一个值是宽度，第二个值是高度

欲了解更多信息：http ://www.w3schools.com/default.asp

于 2014-11-28T04:37:26.277 回答
1

您的图像不会随着 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 % */
}
于 2013-10-18T20:47:41.747 回答
0

如果您将实际图像作为背景元素放入 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;
}

看看情况如何。

于 2013-10-18T21:07:47.020 回答
0

我希望我能很好地理解你真正想要什么。

您必须将图像及其父图像的最大宽度设置为 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%; 
}
于 2013-10-18T21:34:27.503 回答
0

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

无论如何，检查max-height:1000px;css - 这可以限制，当然你应该添加width:100%;height:100%;到你的图像和外部div

于 2013-10-18T20:46:48.187 回答