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

这是关于流体图像的臭名昭着的问题。

假设您有800px宽和450px高的图像。您的图像宽度可以容易地为400像素，高度为225像素，对吗？没有半像素;一切都会井然有序。 200px的宽度怎么样？那么高度会是多少？

嗯，流畅的图像总是会遇到像素宽度，其中它们的高度将具有小数值。浏览器会将其评估为最接近的整数，并且宽高比将被破坏。因此，如果您的布局需要无边距图像平铺或任何其他类似位置，则您遇到麻烦。

但是，如果您知道图像的宽高比以及它们是否相同，就可以解决此问题。它可能不是一个完美的解决方案，但会解决许多情况，可能包括你的情况。看看下面的代码：

<强> 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
}

我们按照以下步骤操作：

将img元素放在div元素
将具有浮点数和大小属性的类分配给div元素
将div元素的高度定义为0（零）
根据纵横比在div元素上放置填充（可能需要微调）

您可以在此处找到它的工作原理：jsfiddle

带图像的css网格第一张图片50％宽度，所有其他图片25％

2 个答案: