-1

我正在尝试为移动设备制作网站，但我遇到了灵活图像的问题。我使用 max-width:100% 和 height:auto 但是当我重新加载页面时，我只得到图像的一小部分，看起来像一条黑线......请任何人都可以帮助我。我该怎么办，因为我花了很多时间在这上面却没有结果......

这是我认为需要的css部分：

.mobilenav{display: block;}

/*Class for the logo of the website*/

.logo1{background:  url(images/logobank8.png) no-repeat;
      margin-top: 2%;
      margin-left: 20% ;
      max-width: 100%;
      height: auto;
         }
/*Class for a transparent header which is put at the begining of the page*/ 
.header1{ background: rgba(74, 84, 91, 0.7);
          width: 110%;
          height: 50px; }

这是html部分：

<div class="mobilenav">
                    <div class="header1">
                            <div class="logo1"></div>
                    </div>
4

1 回答 1

0

假设图像的父级跨越了您尝试填充的宽度，您可以使用width: 100%;将图像缩放到可用的完整宽度。* 请注意，max-width: 100%;仅限制图像扩展超出该宽度。

由于您的图像显示为 div 上的背景，而不是源本身，您可以使用background-size: cover;CSS Tricks 中的以下方法（http://css-tricks.com/perfect-full-page-background-image/） ：

.logo1 { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.logo1还需要设置宽度和高度，但我会根据您的具体需求来确定。

于 2013-11-04T21:20:43.783 回答