Question

我希望我的标题图片与浏览器大小一致。这是我目前的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-->

Screen Grab from current site

Example of what client sees

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

Answer 1

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

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

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

Answer 2

您的图片不会缩小宽度：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 % */
}

Answer 3

将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

Answer 4

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

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

Answer 5

如果您将实际图像作为背景元素放入css中，然后将背景大小设置为包含它，则应使其适合精确的屏幕尺寸。

类似的东西：

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

看看情况如何。

Answer 6

我希望我能理解你真正想要的东西。

您必须在图片上为其设置最大宽度为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%; 
}

CSS / HTML5响应式标题图像

6 个答案: