缩略图纵横比问题

时间：2017-06-10 作者：The WP Intermediate

我在wordpress主题的一个模板中使用了这样的缩略图→

<?php the_post_thumbnail( \'medium\' ); ?>
在浏览器中，它的渲染方式如下→

<img 
    width="300" 
    height="220" 
    src="http://example.com/image-300x220.jpg" 
    class="attachment-medium size-medium wp-post-image" 
    alt="" 
    srcset="
        http://example.com/image-300x220.jpg 300w, 
        http://example.com/image.jpg 640w" 
    sizes="(max-width: 300px) 100vw, 300px"
>
我的第一个问题是如何设置height=auto是否有任何功能可以帮助我们实现这一点？例如responsive-img

简而言之，我想问的是，我应该通过CSS控制宽度，还是WordPress提供一些功能来实现这一点？

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

如果要从img URL中删除高度值，可以使用以下功能：

add_filter( \'post_thumbnail_html\', \'remove_thumbnail_height\', 10, 5 );
function remove_thumbnail_height( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
    $html = preg_replace( \'/height=\\"\\d*\\"/\', "", $html );
    return $html;
}
这将用空值替换高度。请注意，您不能使用Auto 作为height 所有物w3验证器不会对其进行验证。但是，您可以在CSS中将高度设置为自动：

.wp-post-image {
    height: auto;
}

SO网友:Bikash Waiba

你可以用这样的东西，

您可以使用第二个参数作为属性数组，如下所示

the_post_thumbnail(\'medium\', [\'class\' => \'img-responsive\', \'alt\' => get_the_title()]);
如果未使用引导框架，请在样式表中放置

.img-responsive{
   width: 100%;
}

结束
标签： post-thumbnails   小码农  

相关推荐