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/

Answer 2

这是一个关于流体图像的臭名昭著的问题。

假设您有一个800像素宽、450像素高的图像。你的图像可以很容易地具有400px的宽度和225px的高度，对吧？不会有半像素；一切都会井然有序。宽度为200像素怎么样？那么高度是多少？

好吧，流体图像总是会遇到像素宽度，它们的高度将有一个十进制值。浏览器会将其计算为最接近的整数，纵横比将被破坏。因此，如果您的布局需要无边距的图像平铺或任何其他类似的位置，您就有麻烦了。

但是，如果您知道图像的纵横比，并且它们是否相同，则可以修复此问题。这可能不是一个完美的解决方案，但会解决很多问题，可能包括你的问题。看看下面的代码：

HTML

<div class="img1"><img src="http://archontikomanias.gr/files/files/slider/1.jpg" /></div>
<div class="img2"><img src="http://archontikomanias.gr/files/files/slider/1.jpg" /></div>
<div class="img2"><img src="http://archontikomanias.gr/files/files/slider/1.jpg" /></div>
<div class="img2"><img src="http://archontikomanias.gr/files/files/slider/1.jpg" /></div>
<div class="img2"><img src="http://archontikomanias.gr/files/files/slider/1.jpg" /></div>
<div class="img2"><img src="http://archontikomanias.gr/files/files/slider/1.jpg" /></div>
<div class="img2"><img src="http://archontikomanias.gr/files/files/slider/1.jpg" /></div>
<div class="img2"><img src="http://archontikomanias.gr/files/files/slider/1.jpg" /></div>
<div class="img2"><img src="http://archontikomanias.gr/files/files/slider/1.jpg" /></div>
<div class="img2"><img src="http://archontikomanias.gr/files/files/slider/1.jpg" /></div>
<div class="img2"><img src="http://archontikomanias.gr/files/files/slider/1.jpg" /></div>
<div class="img2"><img src="http://archontikomanias.gr/files/files/slider/1.jpg" /></div>
<div class="img2"><img src="http://archontikomanias.gr/files/files/slider/1.jpg" /></div>

CSS

.img1,
.img2 {
  float:left;
  height:0
}
.img1 {
  width:50%;
  padding:0 0 32.5%
}
.img2 {
  width:25%;
  padding:0 0 16.75%
}
.img1>img,
.img2>img {
  width:100%;
  height:auto
}

我们在这里遵循了以下步骤：

1. 将img元素放置在div元素内
2. 为div元素分配具有浮动和大小属性的类
3. 将div元素的高度定义为0（零）
4. 根据纵横比在div元素上添加衬垫（可能需要微调）

你可以在这里找到它的工作原理：jsfiddle