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 ％

这意味着我们有88.6％的宽度我们的4盒之间的分裂...... 88.6％/ 4 = 22.15％

所以，我们给的箱子22.15％的宽度和3.8保证金右％

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

当然这些框会浮动：左等，以使响应功能，所有的箱子将必须在一个容器。

我们将使用媒体查询来制作只有2个盒子或仅1个盒子的长方块的盒子。

至于修剪图像本身，一旦制作了盒子并且具有设置的大小（px的高度），只需在图像盒容器上定义overflow: hidden;即可隐藏剩余部分。