Css / PHP调整图像宽度，然后修剪顶部和底部以适应

Question

我在动态加载的数据库中有图像，这些图像都有不同的大小，但我想以独特的方式调整它们。

Please see this example.

我希望图像适合宽度，然后在顶部和底部跳过剩余部分，然后在顶部，使整个事物响应。

Answer 1

我可以告诉你你需要什么，但没有看到现有的代码，我无法帮助你生成实际的解决方案。

基本上，当生成每个图像时，您应该首先将其包装在div中。

然后，根据图像的大小以及在桌面上你想要的任何宽度你可以适应多少，让我们说是1140px。给你刚刚生成一个图像框的div，然后将该框设置为你想要的尺寸。假设你想要宽4个方框，边距为3.8％。

现在只需计算你所有的宽度来找到盒子的宽度......你会在4个盒子之间有3个边距，所以3.8％* 3 = 11.4％然后...... 100％ - 11.4％= 88.6％

这意味着我们在4个盒子之间分配88.6％的宽度... 88.6％/ 4 = 22.15％

因此，我们给出的框宽度为22.15％，边距为3.8％

你必须在每第4个盒子上动态生成一个类，或者使用类似:nth-child()的东西来告诉每个第4个盒子margin-right: 0;

当然这些盒子将是float：left等来制作响应功能，所有盒子都必须放在容器中。

我们将使用媒体查询将这些框仅设置为2个方框或只有1个长方框。

对于修剪图像本身，一旦制作了框并且具有设置尺寸（高度为px），只需在图像框容器上定义overflow: hidden;以隐藏剩下的内容。