WordPress图像无法正确裁剪

时间:2015-06-19 作者:ninja08

我的帖子图像缩略图设置为:

  add_theme_support(\'post-thumbnails\');
  set_post_thumbnail_size(1280, 436, true); 
  add_image_size(\'general-thumb\', 600, 339, true);   
使用以下css将其调整为两列:

   max-width: 100%;
   height: auto;
它们显示的列宽约为348px。

问题是,当我上传的图像在高度或宽度上都小于600x339的尺寸时,它们在页面上的显示不正确。

我认为这是因为600x339是裁剪图像的起始“框”。然后调整大小以填充列的宽度,同时保留原始图像大小的纵横比。

我可以用wordpress的函数或css黑客来解决这个问题,有哪些方法?

我认为为了使图像能够动态调整大小,需要将每个上传的图像自动裁剪到正确的纵横比,而无需调整大小。但这需要从原始图像的宽度和高度开始,而不是预定义的框尺寸。

谢谢

5 个回复
最合适的回答,由SO网友:theHands 整理而成

听起来您的问题发生在图像被裁剪/调整大小并显示在页面中之前-原始图像太小。

您可以要求上载图像的最小尺寸,请参阅:How to Require a Minimum Image Dimension for Uploading?

然后,要在不裁剪的情况下调整上载图像的大小,请使用第三个参数中的“false”使用“软裁剪”定义图像大小:

add_image_size(\'general-thumb\', 600, 339, false);
最后,使用图像作为元素的背景图像可能是获得正确大小的另一种方法。

您可以在布局中使用所需的任何高度、宽度、最小高度等来定位元素,并使用CSSbackground-size 在元素中填充/定位图像。

例如:

background-size: contain;
将确保图像尽可能大,而不隐藏任何部分。

请参见:https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

SO网友:Nia Skywalk

问题是,当我上传的图像在高度或宽度上都小于600x339的尺寸时,它们在页面上的显示不正确。

我在你写这句话的时候并没有理解,但当我开始研究时,我发现了你的意思,所以我写这篇回答是为了给那些不理解你的意思,或者WP是如何处理图像的其他人记录这一点。

将图像上载到WordPress时,图像会自动处理,并根据设置裁剪或调整大小。

开发人员可以使用此问题中使用的代码声明其自定义大小。

add_theme_support(\'post-thumbnails\');
set_post_thumbnail_size(1280, 436, true); 
add_image_size(\'general-thumb\', 600, 339, true);
用于set_post_thumbnail() 第一个变量是宽度,第二个变量是高度,第三个变量表示裁剪类型:硬(true)或软(false)

对于add_image_size() 第一个字符串是要调用图像的名称,后跟宽度、高度和裁剪。

Hard cropping 按请求的数字按比例减少维度,然后切断所有其他内容以匹配奇数维度例如:如果上载一张800x600照片,希望将其裁剪为600x200,则WP会将800w按比例减少到600w,然后将剩余的450h裁剪到200h。我相信它将图像居中,并从顶部和底部均匀地进行拍摄

Soft cropping 按比例缩小整个图像,保持整个图像例如:您上载的800x600图像将软裁剪到最小最大尺寸200h,使宽度按比例为267w

在这种情况下,我相信OP肯定想Hard Crop, 如规范所示。

所遇到的问题是,WP无法按比例放大图像。如果您想要600w x 200h的图像,但上载550w x 300h,它会将300h裁剪为200h,但保留550w。我遇到的大多数文档都非常清楚地说明了这一点。我知道大多数人使用的“修复”方法是,如果绝对无法以更大的比例获得图像,则在上传之前,先在桌面程序中缩放图像。

OP正在寻找一种解决方案,允许WP将图像缩放到所需的尺寸。此解决方案可在以下位置找到:How to scale up image into thumbnail without distorting it?

Axlmedia(引用的消息来源)还对解决方案添加了以下警告:

稍微有点不好的地方(我们今天的服务器空间不用太担心)是,例如,如果您将一个16×16的favicon上传到您的媒体库,它将被裁剪并放大到所有可用的较大缩略图大小。因此,将创建更多图像。

对于旧图像,WordPress不会返回并还原旧缩略图。这些设置仅适用于从安装点开始的所有新设置。设置解决方案后,您可以找到一两个插件,该插件将返回并将每个图像重新缩放到新设置。我不知道它是否能与添加的高标度函数一起工作。用户Stanislau Ladutska建议的两个插件可以提供更快的整体解决方案。

SO网友:Karun

您可以尝试手动使用WP_Image_Editor 班下面是一个简单的例子

$image = \'http://karunshakya.com.np/wp-content/themes/twentyeleven/images/headers/lanterns.jpg\';
$img_size = getimagesize($image);
$img_process = wp_get_image_editor( $image ); // Return an implementation that extends <tt>WP_Image_Editor</tt>

if ( ! is_wp_error( $img_process ) ) {
    //$img_process->resize( 1920, 661, array( \'left\', \'top\' ) );
    $img_process->crop( 0, 0, $img_size[0], $img_size[1], 600, 339 );
    $img_process->save( $image );
    $img_process->set_quality( 100 );
}

SO网友:Stanislau Ladutska

这是因为wordpress在默认情况下不会对缩略图使用“高比例”。

您可以使用此插件解决此问题:https://wordpress.org/plugins/thumbnail-upscale/

它将只影响新上载的图像。要重新生成旧图像,请使用此插件:https://wordpress.org/plugins/regenerate-thumbnails/

SO网友:Vee

有一个解决方案:

首先在函数中注册缩略图大小。php

add_image_size( \'cp-thumb\', 600, 339, true ); // (cropped) Generate thumbnail while uploading image.
然后按以下方式在post循环中调用它:

<div class="outer-div">
  <div class="inner-div">
    <?php get_the_post_thumbnail( $thumbnail->ID, \'cp-thumb\' ); ?>
  </div>
</div>
将内部div设置为表格单元格,垂直和水平对齐中心。在这种情况下,如果图像大小小于要求。定位或布局不会受到干扰。

试试看。

谢谢你

结束

相关推荐

Replace all media (images)

我为我的Wordpress网站创建了一个新主题,我需要替换网站上的所有媒体(图像),因为我使用的是所有新的图像大小(比我当前网站上最大的图像大小还要大)。98%的图像将使用相同的名称。每个帖子只包含一个(特色)图像,并且帖子的内容区域中没有图像,因此这使工作稍微容易一些。我想知道做这件事最好(最干净)的方法是什么。我考虑了以下因素:使用Wordpress plugin手动删除我所有帖子中的特色图像,删除它们,然后手动添加新图像删除我上传文件夹中的所有媒体,并将其替换为新图像,然后通过以下方式重新生成图像大