Как растянуть изображения на всю ширину в мобильной версии сайта?

Question

[Greg Plitt]

Здравствуйте.
Для того чтобы изображения растягивалось на всю ширину страницы, я использовал такой код:

<style>
@media only screen and (min-width : 320px) and (max-width : 480px) {
 img {width: 100%;}
}
</style>

Вставлял его напрямую в пост страницы (WordPress), для тех страниц, где были изображения в теле статьи.

Но позже, обнаружил, что на некоторых страницах, он срабатывает некорректно.
Пример, скрин - https://clip2net.com/s/3W0XpQp

Страница с проблемой тут - https://goo.gl/5EyGG6

Как можно устранить проблему?

Answer 1

[Leo Mavrin]

У тебя на родителе в figure стоит класс align: left. Из-за чего у тебя происходит обтекание слева от картинки

@media only screen and (min-width : 320px) and (max-width : 480px) {
 img {width: 100%;}
 .alignleft {
    float: none;
 }
}

Comments

[Greg Plitt]

Спасибо, твой вариант сработал в отличие от других советов

Answer 2

[snap44]

Для figure#attachment_70 ширину 100%. У вас 300px указано, картинка и растягивается максимум на 300px