How to stretch images to full width on a mobile site?

Question

css

Hello.
In order for the image to stretch to the full width of the page, I used the following code:

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

I inserted it directly into the post page (WordPress), for those pages where there were images in the body of the article.
But later, I found that on some pages, it does not work correctly.
Example, screenshot - https://clip2net.com/s/3W0XpQp
The page with the problem is here - https://goo.gl/5EyGG6
How can I fix the problem?

Answer 1

You have the align: left class on your figure parent. What is causing the flow to the left of the image?

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

Answer 2

For figure#attachment_70 the width is 100%. You have 300px specified, the picture is stretched to a maximum of 300px