容器内的动态图像大小调整和裁剪

Posted 2023-05-09

【中文标题】容器内的动态图像大小调整和裁剪

【英文标题】：Dynamic image resizing and cropping within a container

【发布时间】：2014-07-02 19:34:54

【问题描述】：

在我工作的地方，我们的每个项目都有一个问题（尤其是在响应式网站上），我们的设计都有固定比例区域来显示图像。当我们处理最初放入设计，但是一旦网站建成并且客户拥有控制权，他们上传的图像都是不同的纵横比和方向。这通常看起来很糟糕和/或破坏了网站的布局。如果我们可以优化图像区域以适应固定比例的纵向或横向图像并告诉客户只使用适合的照片，那就太好了。但是，客户将上传他们找到的任何图像。

现在，我知道了很多方法来使用隐藏在图像容器上的溢出，并使用 css 将图像完美地定位在容器的中心。但是，我一直无法为横向和纵向找到完美的解决方案。当我的肖像很好且居中时，风景看起来不正确，反之亦然。当然还有“焦点”的问题。也许图像看起来不正确，因为图像的主要焦点不是中心。因此，您需要自定义 CSS 来定位网站上的每张图片。

我们是我工作的 wordpress 商店。我一直在研究可能有点像 Facebook 的封面照片功能的插件。因此，客户上传了一个横幅图像。弹出一个具有固定纵横比的裁剪框，供客户定位图像并按照他们想要的方式裁剪。我还没有找到足够好的解决方案...

我为我的啰嗦表示歉意，但我真的很想知道是否有人提出了解决方案，让每个人 - 或者至少是相当多的相关人员 - 开心。

提前感谢您的回复！

【问题讨论】：

这些图片是否使用了 WP 的 post_thumbnail 功能，或者这些图片是否会通过插入图片被放入内容编辑器中？

是的，它们很可能是帖子的特色图片和/或上传到自定义字段套件“循环”字段以用于横幅和幻灯片。

【参考方案1】：

您可以将其隔离以发布缩略图这一事实会有所帮助，因为您可以使用 WordPress 的 add_image_size() 函数在您的 functions.php 文件中预先确定一些大小。但我真正能想到的唯一可行的方法（就真正防止他们搞砸而言）是为图像显示选项设置一些基本规则并编写自己的管理元框功能。

在帖子/页面编辑器中为他们提供一个元框，让他们可以预览图像如何适合您提到的包装 div。然后使用单选按钮或“对齐图像”的选择菜单（使用“左上角”，“中上角”等值）等重新定位它。理想情况下，这将保存一个帖子元属性（您可以将其称为“_image_align”或类似的东西），以及他们选择的属性。

<select name="_image_align">
    <option value="center-center">Center Align</option>
    <option value="top-center">Top Center</option>
    <option value="top-left">Top Left</option>
    (etc.)
</select>

或单选按钮选项...

<input type="radio" name="_image_align" value="center-center">Center Align<br />
<input type="radio" name="_image_align" value="top-center">Top Center<br />
<input type="radio" name="_image_align" value="top-left">Top Left<br />
(etc.)

然后将其映射到您实际设置不同类的显示规则的 style.css 文件。

img.center-center 
    /*center align the image both vertically and horizontally in the parent div*/


img.top-center 
    /*center align the image horizontally and vertically align it to the top of the parent div*/


img.top-left 
    /*left align the image horizontally and vertically align it to the top of the parent div*/

显然，在显示帖子缩略图之前，您必须在循环中获取适当的帖子元数据，以便您可以将自定义类应用于它。

我知道这听起来很复杂，但我经常不得不为这样的东西实现“万无一失”的自定义主题功能，因为正如您所说，在大多数情况下，客户不会对预先调整图像大小（和指导他们如何在 WordPress 的媒体工具中编辑/裁剪图像听起来像是一场灾难），因此不幸的是，开发人员需要在他们的主题中添加智能层，因为我们显然不希望我们的工作看起来像这样我们希望在未来向潜在客户展示它。

不过，您当然可以选择一些不同的路线。