html - 如何仅使用CSS使父div的宽度等于子图像的宽度，子图像的高度等于父div的高度

Question

我有以下 HTML 和 twitter bootstrap

<div class="img-container clearfix">
  <div class="image">
    <img src="/path/to/img.img">
  </div>
  <div class="image">
    <img src="/path/to/img.img">
  </div>
  <div class="image">
    <img src="/path/to/img.img">
  </div>
  <!-- And so on.... -->
</div>

和以下 CSS

<style>
  div.img-container {

    height: 100%;
    width: 100%;
  }
  div.img-container > .image {

      width: auto;
      height: 50%;
      float: left;
      padding: 5px;
      opacity: 1;
  }
  div.img-container > .image > img {

    max-width: 100%;
    max-height: 100%;
  }
</style>

图像的高度正在调整到父 div div.image 的高度，同时我希望父 div div.image 得到子图像的宽度相同，因此所有图像看起来间距相等。

似乎在 chrome 中工作正常，但在 firefox 中不工作，下面是 codepen 中相同的链接 http://codepen.io/anon/pen/jPwWrV

下面也是截图

请帮我解决同样的问题......

Answer 1

这是一个似乎来自padding + bootstrap的错误。移除一个或另一个，它就消失了。

您可以将内边距设置为内部图像:

body {
  width: 100%;
  height: 200px;
}

div.img-container {
  height: 100%;
  width: 100%;
}

div.img-container > .image {
  height: 50%;
  float: left;
  opacity: 1;
}

div.img-container > .image > img {
  max-height: 100%;
  padding: 5px;
}

div {
  box-shadow: inset 0 0 0 1px blue, inset 0 0 3px;
}

http://codepen.io/gc-nomade/pen/pJwgRP