内联块不将宽度调整为子图像答案

【问题标题】：Inline-block not adjusting width to child image内联块不将宽度调整为子图像
【发布时间】：2016-09-19 17:07:56
【问题描述】：

我有一个水平滚动的容器，里面有几个内联块 div，每个 div 都包含一个图像。图像设置为 height:100% 和 width:auto。问题是内联块没有占用图像的宽度。他们似乎使用的是原生图像宽度而不是渲染宽度。

.container {height:300px; overflow:auto; white-space:nowrap;}
.container div {display:inline-block; height:100%;}
img {height:100%; width:auto;}

<div class="container">
  <div>
    <img src="example.jpg"/>
  </div>
  <div>
    <img src="example.jpg"/>
  </div>
</div>

https://jsfiddle.net/8mL0yx56/3/

整个事情都在一个弹性项目中，这似乎是造成它的原因。有什么办法可以阻止这种情况？

【问题讨论】：

能否请您创建一个向我们展示问题的小提琴
您没有在任何地方设置宽度。 auto 是默认值，它会恢复为原生。
@AndréDion - 不，它没有。 jpg <img> 是具有固有尺寸的替换元素，将保留其纵横比并根据其高度设置其使用的宽度。
@AndrewL 用小提琴更新

标签： css

【解决方案1】：

.flex-item {height:100%;}

它可以解决你的问题。

你设置了.container {height:100%;}，但它的父亲.flex-item没有高度。

【讨论】：

是的，看起来像这样。虽然现在每张图片的右边都有一点空间，但你知道这是什么吗？ jsfiddle.net/8mL0yx56/4
我猜是box-sizing引起的，不知道是什么原因。但是设置img { display: block; } 可以解决空间问题。 jsfiddle.net/mrfour/8mL0yx56/5