HTML：

<div class="seizoenen">
    <div class="container">
        <img src="image/zomer.jpg" height="100%" width="25%" />
    </div>
    <div class="container">
        <img src="image/herfst.jpg" height="100%" width="25%" />
    </div>
    <div class="container">
        <img src="image/winter.jpg" height="100%" width="25%" />
    </div>
    <div class="container">
        <img src="image/lente.jpg" height="100%" width="25%" />
    </div>
</div>

这是JSFiddle。

Answer 1

Hoi bart，它很容易做到。您的容器需要display: inline-block;，这会将图像放在彼此旁边。并填充图像的空间使它们宽度：100％;

现在正确fiddle

有一点我不清楚你想让图像缩小到更小的尺寸吗？

Answer 2

https://jsfiddle.net/bs3fz70v/2/

如果你想要它的反应......

将img标记更改为max-width并在CSS中设置此标记。一旦它击中较小的屏幕，这将缩小图像。
关注您的父元素元素结构。您的.container width应设置为25%，而不是img标记。
您在评论中提到了文字叠加。将.container（父元素）设置为position: relative;将.container中的任何标记（子元素）设置为position: absolute;。现在，您可以将top或left设置为100％以内的任何值，并将其包含在.container内。由于img代码为max-width:100%;，因此该容器的全宽度为25％。
同时将height设置为auto，这样图片就不会被拉伸。

<强> CSS

.seizoenen{
    width:100%;
}
p { 
    position: absolute;
    top: 50%;
    left: 50%;
}
.container{
    display: inline-block;
    width: 24%;
    position: relative;
}
img{
   max-width: 100%; 
}

希望这可以帮助您开始尝试更多定位

如何并排获取图片（响应）

HTML：

2 个答案: