带有图像的 css 网格，第一个图像宽度为 50%，其他图像宽度为 25%

Question

我想用图像制作一个网格。所有图像都具有相同的尺寸。第一个宽度为 50%，其他所有宽度为 25%。我写了下面的代码。在大多数分辨率下都可以，但在某些情况下当我调整窗口大小时，第一张图像会损坏，而且不是 50%。

<img src="1.jpg" class="img1" />
<img src="1.jpg" class="img2" />
<img src="1.jpg" class="img2" />
<img src="1.jpg" class="img2" />
<img src="1.jpg" class="img2" />
<img src="1.jpg" class="img2" />
<img src="1.jpg" class="img2" />
<img src="1.jpg" class="img2" />
<img src="1.jpg" class="img2" />
<img src="1.jpg" class="img2" />

.img1
{
    width:50%;
    float:left;
}

.img2
{
    width:25%;
    float:left;
}

Answer 1

我似乎没有复制第一个制动图像。但这可能是一个更强大的解决方案

CSS

img {
    width:25%;
    float:left;
}

img:first-child {
  width:50%;
}

https://jsfiddle.net/qyos51jj/