具有css的响应div宽度和高度

我正在尝试构建一个水平滚动布局，由图像块组成：

<div class="container">
  <div class="item">
     <img src="http://placehold.it/200x300">
 </div>
   <div class="item">
     <img src="http://placehold.it/400x300">
 </div>
   <div class="item">
     <img src="http://placehold.it/300x300">
 </div>
</div>

我使用了

display:inlineblock

和

whitespace:nowrap属性来实现这一点，它确实起作用，但浏览器似乎不会在调整大小时重新计算块宽度

选中此处：然后尝试调整浏览器的大小

下面是一个屏幕抓图，以更好地了解我的问题：

首先，所有的图像都定位良好，我可以水平滚动：完美
然后调整浏览器的大小
图像正在调整大小，而不是
.item
包装。出现白色间隙：(
基本上，我期待与垂直滚动相同的功能，即根据内容大小调整宽度。
我甚至不明白这里的逻辑

有没有办法克服这个问题

谢谢！
检查一下，这就是你想要的吗

我用边框管理你的班级：实心1px红色；
使用宽度：在某些类中为100%

同样在课堂项目中：

width:100%;



编辑2:看看你的视频，我认为新方法正是你想要的

您必须使用
.item
将
div
类显示为
inline
，并删除
空白：normal
属性

.item {
  display: inline;
  height:100%;
}


说明：
我不是
CSS
方面的专家，所以如果有人看到一些错误，请纠正我

当您将元素显示为
内联块
时，如下所示：


内联块

使元素生成内联级块容器。内联块的内部格式化为块框，元素本身格式化为原子内联级框

这意味着您显示为
inline block
的元素的行为类似于块，但您可以将其设置为inline（在同一行中）。这意味着您可以在单行中设置div（默认为
display:block
）。您还可以看到它：

div元素是division的缩写，是块级通用容器

另外，
inline
元素无法获得
高度/宽度
属性，因此，当您使用
显示
div
时，item
类作为
inline
时，它们会包装内容，但不会获得它们应该对应的
高度/宽度
（在您的案例中，来自他们的父母，正如您将他们与
%
放在一起时所说的那样）

如果将它们显示为
内联块
，则不会更改其默认的
高度/宽度
属性。只允许在单行中显示它们

要查看三个div（
inline
/
inline block
/
block
，默认情况下）。
您必须稍微修改css

HTML

<div class="container">
  <div class="item">
     <img src="http://placehold.it/200x300">
 </div>
   <div class="item">
     <img src="http://placehold.it/400x300">
 </div>
   <div class="item">
     <img src="http://placehold.it/300x300">
 </div>
</div>

很抱歉，我无法理解您的问题。虽然您的第一张图像的宽度是200px，但如果您调整浏览器的大小，它会根据浏览器的大小而变化。这是您试图解决的问题吗？您是否希望不管浏览器的大小，它都是200px？请澄清。如果您水平调整浏览器的大小，您将看到图像调整大小但不调整其包装块（.item）？（在chrome/firefox上）@skiplecariboo我想这就是你想要的结果，因为在调整大小时清除了白色间隙，谢谢，不幸的是。项目元素不一定有相同的宽度，我想使用不同比例的图像。在你的示例中，图像被拉伸：-/@skiplecariboo你总是有相同的图像，相同的大小吗？如果我们都响应div，some图像会拉伸。而且看起来不好。布局应该接受不同大小的不同图像。它们的大小由高度决定，高度应该始终适合浏览器的大小。宽度是自由的。没有拉伸。我实际上希望项目溢出以创建水平滚动布局。我的问题是项目宽度没有正确调整大小当浏览器垂直调整大小时，它会自动调整大小。@skiplecariboo项目宽度没有正确调整是什么意思？感谢您的帮助：）我的意思是图像正在调整大小，但是包装器（.item class）不要调整大小。你可以看到图像之间的白色间隙。我用视频截图更新了我的问题，希望有帮助！@skiplecariboo所以你想要的是包装也可以调整大小？就是这样！谢谢@Error404。项目块现在正在正确调整大小。我会深入检查以给你奖金。另外，我很抱歉，我意识到我没有解释我的问题很好。。
html,body {
  height:auto;
}

.container {
  display: inline-block;
  white-space: nowrap;
  height:auto;
}

.item {
  display: inline-block;
  white-space: normal;
}

.item img {
  width:100%;
  height:100%;
}