如何使用srcset属性设置图像大小并仍具有响应图像？

时间：2016-10-07 作者：Sam Provides

我在我的主题中有这个函数来创建缩略图大小。

  set_post_thumbnail_size( 620, 848, true );
            if (function_exists(\'add_image_size\')){
                    add_image_size( \'compare-shop-logo\', 150 );
                    add_image_size( \'compare-single-product-2\', 250, 188, true );
                    add_image_size( \'compare-slider-image\', 848, 487, true );
                    add_image_size( \'compare-offer-box\', 400, 300, true);
                    add_image_size( \'compare-blog-box\', 400, 225, true );
                    add_image_size( \'compare-quote-box\', 408, 437, true );
            }
为什么如果我更改了报价框的大小，我会丢失img标签中的srcset和size？有没有办法调整大小以保持比例？

<img width="400" height="300" src="myimage-400x300.jpg" class="embed-responsive-item wp-post-image" alt="image" srcset="myimage-1-400x300.jpg 400w, http:///myimage-250x188.jpg 250w" sizes="(max-width: 400px) 100vw, 400px">
谢谢

1 个回复
最合适的回答,由SO网友:Andy Macaulay-Brook 整理而成

srcset属性由具有相同纵横比的图像构造而成。创建其中一些，你就会没事了。

add_image_size( \'compare-offer-box\', 400, 300, true);
add_image_size( \'compare-offer-box-2\', 800, 600, true);
add_image_size( \'compare-offer-box-3\', 1200, 900, true);
例如。第四个布尔参数告诉WP裁剪到精确的比例。

要在不裁剪的情况下调整大小，请使用：

add_image_size( \'compare-offer-box\', 400, 9999, false);
add_image_size( \'compare-offer-box-2\', 800, 9999, false);
add_image_size( \'compare-offer-box-3\', 1200, 9999, false);
这假设您需要一个特定宽度的图像，然后是比例所需的任何高度。您将在web上看到一些使用0 或null 对于非约束维度，但WP源代码中的注释警告说，这可能会产生“不可预测的结果”

如果希望在约束高度时按比例缩放，则只需对宽度使用一个较大的值：

add_image_size( \'compare-offer-box\', 9999, 400, false);
add_image_size( \'compare-offer-box-2\', 9999, 800, false);
add_image_size( \'compare-offer-box-3\', 9999, 1200, false);
如果要保持比例，但要缩放图像以适应特定空间，例如400px×400px，则可以指定最大宽度和高度，但裁剪设置为false：

add_image_size( \'compare-offer-box\', 400, 400, false);
请注意，如果要按高度进行约束，则可能还需要调整“大小”属性，因为该属性默认为视口的宽度，最大值为指定图像大小的宽度。

不要忘记，然后需要为现有图像重新生成图像大小。有一些插件可以很好地做到这一点：在插件库中搜索重新生成缩略图。

标签： theme-development   images   responsive   小码农  

相关推荐

Broken images on iphone

我在iPhone上破坏了图像，这只发生在我大约一周前添加新图像的主页上（新图像的格式和大小与旧图像完全相同）这是网站：CartonMaster。伊利诺伊州公司提前感谢，