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

Question

我正在创建一个网站，该网站包含一个图像，其中某些区域是链接。我希望图像为 width: 100%，height 为 auto，以保持纵横比。

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

问题是元素的 height 没有得到很好的控制，似乎不符合我设置的高度。

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

谢谢!

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