如何在 wordpress 的主页上显示裁剪的图像？

Posted 2023-02-25

【中文标题】如何在 wordpress 的主页上显示裁剪的图像？

【英文标题】：How do I display cropped image on homepage in wordpress?

【发布时间】：2014-07-30 14:45:54

【问题描述】：

如何在 wordpress 中显示一个非常长的图像的裁剪图像，并在底部放置一个“阅读更多”永久链接到全文/帖子。像这样

这是来自主页

http://s28.postimg.org/l8qbm85rh/image.jpg

这是全文（原图很长）

http://s28.postimg.org/85zagp4x9/image.jpg

【问题讨论】：

你可以在图片上做一个 css overflow:hidden。

【参考方案1】：

裁剪图像有很多选项。 This jsfiddle 包括一对。 取消注释 css 部分中的样式以查看执行此操作的 2 种方法。

html

<div>
    <img id="myImage" src="http://s28.postimg.org/85zagp4x9/image.jpg">
</div>

CSS

/*div
    overflow:hidden;
    width:300px;
    height:300px;
*/

或

/*#myImage 
    position:absolute;
    clip:rect(150px, 650px, 640px, 140px);
*/

【讨论】：

好的。种植工作。但是现在我如何使每个图像都可以使用。另外，我如何将此图像链接到整个帖子。当用户浏览整个帖子时，这个裁剪后的图像是否会与完整图像一起看到？

对于要像这样裁剪的每个图像，请使用 img 而不是#myImage。这会将您网页上的所有图像裁剪为相同的尺寸。整个帖子是什么意思？

见。在我的问题中，第一张图片被裁剪（这是在主页上）。当有人点击“查看全文”时，他/她会被重定向到整篇文章。此裁剪后的图像（您的方法）是否会与文章中的完整图像一起显示。在第二张图片（在问题中）有标题，然后是整个图片。不显示裁剪的图像。

您可以将此代码添加到要使用裁剪的任何页面。因此，如果您希望所有页面都包含图像裁剪，您可以插入一个指向允许这样做的 css 的链接。如果您不希望图像被裁剪，则无需将代码添加到网页中。这有帮助吗？

嗯，没有。查看这些图片 这是带有裁剪图像的主页s12.postimg.org/o55yjfcq5/image.jpg 现在这是整篇文章。 s12.postimg.org/yt9pi9mp9/image.jpg你看，整篇文章都出现了裁剪图和原始大图。