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

Question

我有以下HTML和twitter引导程序

<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