Html 如何使div适合其内容的宽度，而不使其包裹，同时比其父级宽

请参阅此JSFIDLE中的代码：

我的想法是，我希望在屏幕顶部有一个图像栏。

img包装器

div稍后将通过javascipt设置动画，以便在鼠标悬停时向左移动。有关我最终试图实现的目标的示例，请参见第页。不同之处在于，在我的中，动画仅在鼠标悬停时运行

问题是在我的JSFIDLE和链接示例中，包含图像的div的宽度是硬编码的。在我的例子中，css将

img包装的宽度硬编码为200%。我需要我的页面支持任意数量的图像，所以我需要它的宽度等于内容的宽度。按照我的JSFIDLE的实现方式，如果有更多的图像可以放入
img包装器
，它们将换行

解决此问题的最佳方法是什么？
使用
flexbox
和
animation
的方法：

html, body {
  margin:0;
  padding:0;
  overflow: hidden;
}

.demo-ribbon {
  width: 100%;
  height: 70vmin;
  margin-top: 2rem;
  overflow: hidden;
}
.img-wrapper {
  height: 70vmin;
  width: 100%;

  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
}

img {
  flex: 1;
  object-fit: content;
  margin: 0 .2rem;
  width: 100vmin;
  height: 100%;  
}
.lead {
  animation: bannermove 12s linear 320ms infinite paused alternate;
}

.img-wrapper:hover .lead {
  animation-play-state: running;
}

@keyframes "bannermove" {
 0% {
    margin-left: 0%;
 }
 100% {
    margin-left: -230%;
 }
}

您需要添加前缀才能在所有浏览器中工作，尤其是
动画

进一步阅读：

工作笔：

纵横比：&

希望有帮助！：）
 将flexbox和动画与translate一起使用：）


.demo功能区{
宽度：100%；
溢出：隐藏；
}
.demo ribbon.img包装器{
显示器：flex；
证明内容：拉伸；
右边距：0；
位置：相对位置；
宽度：100%；
}
.demo ribbon.img包装器img{
过渡：所有0.5s缓解；
保证金：2倍；
}
.demo ribbon.img包装器img：第一个孩子{
动画：lefttoRight 25秒线性320毫秒无限暂停交替；
}
.demo ribbon.img包装器img:hover{
转换：比例（1.1）；
光标：指针；
盒影：0px 3px 5px rgba（0,0,0,0.2）；
}
.demo ribbon.img包装器：悬停img{
动画播放状态：运行；
}
@左向右关键帧{
0% {
左边距：0；
}
50% {
左边距：-200%；
}
100% {
左边缘：0%；
}
}

你能使用flexbox吗？我已经试过了，但是所有的图像都变得相同的宽度，并且由于它们的纵横比不一致而失真。在图像中，使用
flex:1
所有图像变得相同的宽度和高度。这些图像可能并非都具有相同的纵横比，并且可能会出现拉伸或挤压。理想的解决方案是保持图像的纵横比。另外，您的代码笔在我的机器（chrome 66）上似乎无法正常工作。图像在移动时会伸展。笔@quantumbutterfly现在只在悬停状态下工作，您仍然可以为它们指定宽度：auto和高度：auto，它们将具有原始宽度和高度。aspect radio背后的原因是因为父容器的高度OW，感谢您为此付出的努力！然而，这些图片似乎仍然失真。这是我看到的一个截图，因为图像有不同的方向。因此，它们不会收缩或膨胀，同时保持相同的外观。我已经更新了我的答案，这是我能做的最好的了