Question

在WordPress帖子中，我有这个HTML标记。

<img class="size-full wp-image-761" src="http://domain.com/wp-content/uploads/2016/09/couple.jpg"  width="650" height="433" />

渲染时产生

<img class="size-full wp-image-761" src="http://domain.cloudfront.net/wp-content/uploads/2016/09/couple.jpg" width="650" height="433" srcset="http://domain.cloudfront.net/wp-content/uploads/2016/09/couple.jpg 650w, http://d14x51nv4ivcb0.cloudfront.net/wp-content/uploads/2016/09/couple-300x200.jpg 300w" sizes="(max-width: 650px) 100vw, 650px">

当我在PC上的浏览器中查看页面时，一切都很好，但是当我在手机上查看页面时是不正确的。图像对于屏幕而言太大，所以我只看到图像的左侧部分，我无法将页面向右移动以查看图像的其余部分。

在多台设备上查看时，如何处理图像大小调整？

Answer 1

试试这个：

domain2.suffix/domain2.suffix

我刚将<img class="size-full wp-image-761" src="http://domain.com/wp-content/uploads/2016/09/couple.jpg" width="100%"/>属性更改为width。

Answer 2

在functions.php中添加此代码当您将图像添加到发布内容时，它将删除图像的宽度高度属性。

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10, 3 );
function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

现在在style.css文件中添加以下css

img{
     max-width:100%;
     height:auto;
}

WordPress调整移动设备的图像大小

2 个答案: