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

在100％宽度容器中为div创建百分比高度

1 个答案: