Question

链接演示：http://codepen.io/leoaivy/pen/adxJaR 正如你在上面的链接中看到的那样，第一个方格的孩子没有伸展它的父母，而第二个方格的孩子则没有。我认为这是因为图像本身具有比例，因此我们无法通过绝对位置来改变它。是不是？

html：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns:local="local"
     xmlns:svg="http://www.w3.org/2000/svg"
     width="640"
     height="480">
   <g>
      <ellipse id="id_d2e0"
               stroke-dasharray="null"
               stroke-linjoin="null"
               stroke-linecap="null"
               stroke="#000000"
               stroke-width="2"
               fill="#ff7f00"
               cx="0"
               cy="0"
               rx="50"
               ry="50"/>
      <ellipse id="id_d2e6"
               stroke-dasharray="null"
               stroke-linjoin="null"
               stroke-linecap="null"
               stroke="#000000"
               stroke-width="2"
               fill="#ff7f00"
               cx="0"
               cy="0"
               rx="30"
               ry="30"/>
   </g>
</svg>

css：

<div class="parent">
  <img src="http://placehold.it/350x150" alt="" />
</div>

<div class="parent">
  <span></span>
</div>

Answer 1

您可以通过添加height:100%; width:100%;

来强制图像拉伸

.parent {
  position: relative;
  display: inline-block;
  width: 400px;
  height: 400px;
  overflow: hidden;
}
.parent img {
  width: 100%;
  height: 100%;
}
.parent img,
span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.parent span {
  background: gold;
}

<div class="parent">
  <img src="http://placehold.it/350x150" alt="" />
</div>

<div class="parent">
  <span></span>
</div>

绝对定位的img没有拉伸父母？

1 个答案: