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

При просмотре страницы в браузере на ПК все нормально, но когда я смотрю на страницу на моем телефоне неверна. Изображение слишком велико для экрана, поэтому я вижу только левую часть изображения, и я не могу переместить страницу вправо, чтобы увидеть остальную часть изображения.

Как обрабатывать изменение размера изображений при просмотре на нескольких устройствах?

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

Теперь добавьте следующий CSS в вашем style.css файл

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