php - Css/PHP 调整图像宽度然后修剪顶部和底部以适合

Question

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

请看这个例子。

我希望图像适合宽度，然后在顶部和底部绊倒其余部分，然后最重要的是，使整个事物具有响应性。

Answer 1

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

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

然后，根据图像的大小以及在桌面上您想要的任何宽度可以容纳多少，假设是 1140 像素。给刚刚生成的 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%，margin-right 是 3.8%

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

当然，这些盒子将是 float: left 等以实现响应功能，并且所有盒子都必须在一个容器中。

我们将使用媒体查询使盒子只有 2 个盒子宽或只有 1 个长的盒子列。

至于修剪图像本身，一旦制作了盒子并设置了尺寸（以 px 为单位的高度），只需overflow: hidden;在 image-box 容器上定义以隐藏剩余的内容。