css - 在 100% 宽度的容器中为 div 创建百分比高度

Question

我正在创建一个网站，该网站由带有某些链接区域的图像组成。我希望图像是width: 100%，并且height是auto，以保持纵横比。

图像中我想成为链接的所有位置也会被缩放，所以我正在考虑创建具有百分比边距的 div 以创建可缩放区域。这适用于 div 的宽度，

问题是height from 元素没有得到很好的控制，并且似乎不尊重我设置的高度。

有没有人知道如何完成这项工作，或者有更好的方法来完成这项工作的建议？

谢谢！

Answer 1

我能想到几种方法。不需要任何额外标记的方法是position: relative放在#bigbox. 然后，您可以使用顶部和底部值而不是高度值来绝对定位小框。

CSS：

img{
  width: 100%;
  z-index: -1;    
}

div#bigbox {
  width: 100%;
  margin: 0 auto;
  margin-left: 0;
  position: relative;
}

div#smallbox1 {
  left: 11%;
  top: 20%;
  width: 20%;
  bottom: 23%;
  position:absolute;
  background-color: red;  
}

div#smallbox2 {
  margin-left: 40%;
  top: 20%;
  width:20%;
  bottom: 23%;
  position: absolute;
  background-color: green;
}

在此处更新您的 jsbin：jsbin.com/oqojef/2/edit