Question

在我工作的地方，我们遇到了一个问题（特别是在响应式网站上），我们的设计中每个项目都有固定的比例区域来显示图像。当我们使用最初放大的完美尺寸的复合图像时，这一切都很有效。进入设计，但一旦网站建成并且客户端有控制权，他们上传的图像都是不同的宽高比和方向。这通常看起来很糟糕和/或打破了网站的布局。如果我们可以优化图像区域以适应固定比例的肖像或风景图像并告诉客户仅使用适合的照片，那就太棒了。但是，客户端将上传他们找到的任何图像。

现在，我知道一些方法可以使用隐藏在图像容器上的溢出并使用css将图像完美地定位在容器的中心。但是，我还没能找到完美的景观和肖像解决方案。当我的肖像很好并且居中时，景观看起来并不正确，反之亦然。当然还有＃34焦点问题＆＃34;同样。也许图像看起来不正确，因为图像的主要焦点不是中心。因此，您需要自定义css来定位网站上的每个图片。

我们是一家工作的WordPress商店。我一直在研究可能与Facebook的coverphoto功能类似的插件。因此，客户端上传了一个横幅图片。弹出具有固定宽高比的裁剪框，以便客户端定位图像并按照他们想要的方式裁剪。我还没有找到足够好的解决方案......

我为我的长篇大论道歉，但我真的很想知道那里是否有人提出解决方案，让每个人 - 或者至少是相关人员 - 都感到高兴。

提前感谢您的回复！

Answer 1

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

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

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

OR单选按钮选项...

<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*/
}

在显示帖子缩略图之前，您显然必须在循环中抓取相应的帖子元素，以便您可以将自定义类应用到它。

我知道这听起来很复杂，但我经常不得不实施＆＃34;傻瓜证明＆＃34;这样的东西的自定义主题功能，因为正如你所说，在大多数情况下，客户不会给出关于预先调整图像大小的废话（并指导他们如何在WordPress的媒体工具中编辑/裁剪图像这听起来像是一场灾难），所以不幸的是，开发人员会在他们的主题上添加智能层，因为如果我们想在未来向潜在客户展示它们，我们显然不希望我们的工作看起来很高兴。

不过，你可以选择不同的路线。

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

1 个答案: