Question

我有旋转横幅图像，我想在任何屏幕尺寸下工作（缩放以适应）。

当我使用以下内容时，它可以工作：

.banner{
    position:absolute; 
    width: 80%; 
    height: 30%; 
    top:5%; 
    left:20%;  
    background:#FFF; 
    border:hidden;
}

但是，当我尝试将宽度更改为例如40％时，图像会截断而不是缩小。

当我尝试使用例如max-width：80％或width：auto时，即使我使用高z-index，图像也会完全消失。

Answer 1

在图片上同时设置width和height并不关心宽高比。只需使用width = 100%，并保留与其相关的height（使用以下技术）。

然后将容器宽度设置为您想要的任何内容：

#banner {
  width: 100%;
  height: 0;
  padding-top: 30%;
  background: red;
}

#banner-container {
  width: 400px;
}

<div id="banner-container">
    <div id="banner"></div>
</div>

如果要在其中显示图片，请将background-image与background-size: cover一起使用：

#banner {
  width: 100%;
  height: 0;
  padding-top: 30%;
  background: gray;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

#banner-container {
  width: 400px;
}

<div id="banner-container">
    <div id="banner" style="background-image: url('http://placekitten.com/800/500');"></div>
</div>

当我使用max-width或width：auto时，横幅中的图像会消失

1 个答案: