如何使用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的bug。删除其中一个，它就消失了。

您可以将填充设置为内部图像：

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