div中的图像具有良好的外观风格

Question

我想知道是否有办法让div里面的图像看起来如图所示。例如，如果div中有两个以上的图片，则一个图像将是最大的，另一个图像将划分最大图像的宽度。此外，如果有四个图像，它们必须看起来像一个正方形。请检查图像。 注意：我将从数据库中检索图像

Answer 1

如果没有您提供任何代码，我只能提供有用而不是您可能特别想要的内容。实现这一目标的一种方法是通过flex。

通过定义宽度和高度，然后将img高度设置为随flex一起增长，您可以使其适应您想要的4个图像。我提供了一个提供示例的jsfiddle。希望你喜欢！

.box {
    height: 600px;
    width: 600px;
    box-shadow: inset 0 0 0 1px;
    display: flex;
    flex-flow: column wrap;
    margin-bottom: 4px;
}
img {
    box-shadow: 0 0 0 1px;
    flex-grow: 1;
}

https://jsfiddle.net/f8zaav92/

Answer 2

免责声明：CSS不适合条件渲染。 因此，当我们以正式完成时，我非常清楚如何使一切正常;）请检查我的fiddle。

img:nth-last-child(n):first-child{ .. }

有关详细信息，请参阅this link