Question

我有一个用于摄影作品集的水平滚动网站，因此为了使人们易于浏览，我使用户垂直滚动时网站可以水平滚动。但是，由于我这样做了，因此div将每个图像INSIST保持为固定宽度，并且不符合它们包含的图像的宽度。我相对缺乏编码经验，因此对使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

Divs坚持要大于内容

1 个答案: