列中的CSS元素在比例转换时位于上边界下方

Question

我使用column-count有4列图像，我希望它们在鼠标悬停时缩放。

第一列工作正常，但接下来的三列在转换时将位于上边界之下。

我尝试了各种页边距和填充，也尝试了z-index，但没有用。

这里是现场直播JSFiddle

代码：

.content{
    margin-top: 20px;
    background-color: black;
}

.photos img {
    margin-bottom: 10px;
    vertical-align: middle;
    height: auto;
    width: 100%;
}

.photos {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}

li img {
    -webkit-transition: 0.2s;
}


li img:hover {
    -webkit-transition: .5s;
    transform: scale(1.3);
}

<div class="content">
    <ul class="photos">
        <li>
            <img src="https://syndlab.com/files/view/5db9b150252346nbDR1gKP3OYNuwBhXsHJerdToc5I0SMLfk7qlv951730.jpeg">
        </li>

        <li>
            <img src="https://lh3.googleusercontent.com/proxy/t2UjB23Xy8xLCPcwavD_5pqDWQH8wx1tOggm85KZq22oyODukZGZyMDIfGHwIKyZj1U4JeAzn3t5bkgPXcV8pJ60udJ1eQ">
        </li>

        <li>
            <img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
        </li>

        <li>
            <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
        </li>

    </ul>
</div>

Answer 1

我认为列的问题是浏览器“混乱”，并认为下面的非第一张图片更多。

我发现有两种方法可以完成这项工作，首先是我的最爱：display: flex;

.content{
    margin-top: 50px;
    background-color: black;
}

.photos img {
    margin-bottom: 10px;
    vertical-align: middle;
    height: auto;
    width: 100%;
}

.photos {
    padding: 0;
    list-style: none;
    display: flex;
}

.photos li{
  flex-basis: 25%;
  padding: 0 5px;
  margin: 0;
}

li img {
    -webkit-transition: 0.2s;
}


li img:hover {
    -webkit-transition: .5s;
    transform: scale(1.12);
}

<div class="content">
    <ul class="photos">
        <li>
            <img src="https://syndlab.com/files/view/5db9b150252346nbDR1gKP3OYNuwBhXsHJerdToc5I0SMLfk7qlv951730.jpeg">
        </li>

        <li>
            <img src="https://lh3.googleusercontent.com/proxy/t2UjB23Xy8xLCPcwavD_5pqDWQH8wx1tOggm85KZq22oyODukZGZyMDIfGHwIKyZj1U4JeAzn3t5bkgPXcV8pJ60udJ1eQ">
        </li>

        <li>
            <img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
        </li>

        <li>
            <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
        </li>

    </ul>
</div>

使用列设置的其他可能性围绕position: absolute添加到.photos img或float: left添加到.photos。

编辑：

我看到Alessio在我从事我的工作时创建了他的答案，并且他还使用了float。如果您使用float解决方案，请接受他的答案作为有效的答案。

Answer 2

您可以切换到flexbox并毫无问题地实现相同的行为。