html - Div 坚持要大于其内容

Question

我有一个用于我的摄影作品集的水平滚动网站，因此为了让人们更容易浏览，我可以让网站在用户垂直滚动时水平滚动。然而，由于我这样做了，所以持有每个图像的 div 坚持固定宽度并且不符合它们包含的图像的宽度。我对编码相对缺乏经验，所以任何帮助让 div 匹配其图像宽度的帮助将不胜感激。

Here is my html and css

<div class="main-content">
<div class="banner-01 post">
<img src="http://jmatta.com/images/pix/Main/frankell.jpg">
</div>
<div class="banner-02 post">
<img src="http://jmatta.com/images/pix/Main/HMR17.jpg">
</div>
<div class="banner-03 post">
<img src="http://jmatta.com/images/pix/Main/Banes16.jpg">
</div>
<div class="banner-04 post">
<img src="http://jmatta.com/images/pix/Main/scott5.jpg">
</div>
</div>

body {
background: white;
color: black;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
margin: 0;
padding: 0;
font-size: 24px;
}

.main-content{
position:absolute;
display: flex;
flex-direction: column;
top: 50px;
left:250px;
width:700px;
max-height:1150px;
overflow-y:auto;
overflow-x:hidden;
transform:rotate(-90deg) translateY(-700px);
transform-origin:right top;
}

.main-content div{
transform:rotate(90deg) translateX(700px);
transform-origin: right top;
display: inline-block;
}

.main-content img{
max-height: 89vh;
}

Answer 1

由于您旋转了图像的父级，因此 div 的高度似乎不遵循所包含图像的高度。我不确定您为什么要旋转 main-content。我删除了所有的旋转和变换(出于某种原因它们是必需的吗？)并简化了整个代码。 img 和 div 现在具有相同的大小。如果您需要图像之间的间距，只需在图像上添加边距即可。

我相信这是您正在寻找的解决方案: code