WordPress調整移動設備的圖像大小

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

嘗試這個：

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

我剛剛將width屬性更改為100% 。

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;
}