Question

如何让这个div响应高度？

<style>
.full1 {
  margin-bottom: 10px;
  margin-top: 10px;
  width: 100%;
  height: 225px;
}
.left1,
.middle1, 
.right1 {
  float: left;
  width: 33%;
  height:100%;
}
</style>

<body>
  <div class="full1">
    <div class="left1" >
      <img class="left-image" src="http://s16.postimg.org/nc57l3p8l/1_screen_shot_2014_08_24_at_12_43_26_pm_medium.jpg" />
    </div>
    <div class="middle1">
      <img class="left-image" src="http://s16.postimg.org/wl7dv7y4l/windows_9_logo_01_medium.jpg" />
    </div>
    <div class="right1">
      <img class="right1-image" src="http://s16.postimg.org/ig6675eh1/windows_9_logo_08_medium.jpg" />
    </div>
  </div>
</body>

这是小提琴：http://jsfiddle.net/k07gg3pv/。

图像按宽度调整大小，但高度在放大时会留下较大的空白区域。

Answer 1

您必须设置图像的宽度/高度：

.full1 img {
  width: 100%;
  height: 100%;
}

（这是你的小提琴：http://jsfiddle.net/k07gg3pv/3/）

这将使图像完全吻合。但这不是一个很好的解决方案，因为你的图像不具备应有的比例。所以你必须决定你是想要准确地适应100％的宽度还是正确的高度，你不会得到合适的图像和两者。

因此，您必须为图像设置一个值（宽度或高度）：

.full1 img {
  width: 100%;
}

（这是你的小提琴：http://jsfiddle.net/k07gg3pv/4/）

如何使这个div响应高度？

1 个答案: