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

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>