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

Question

In a WordPress post I have this HTML tag.

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

Which when rendered produces

<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">

When I view the page in a browser on a PC everything is fine, but when I view the page on my phone is incorrect. The image is too big for the screen so I only see the left part of the image and I am unable to move the page to the right to see the rest of the image.

How do I handle the resizing of images when viewing on multiple devices?

Answer 1

Try this:

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

I just changed the width attribute to 100% .

Answer 2

Add this code in functions.php It will remove width height attribute of image when you add image to post content.

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

Now add following css in your style.css file

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