How to make stretchable images in HTML?

Question

css

Help to make HTML page.
There is an article that contains images. The article can be viewed both on a large monitor and on a phone with a resolution of 800x480.
In order for the article to look normal on a large monitor, I enclose the entire article in a div with a maximum width of 800px.
However, images can be wider than 800px and should be displayed at their full size if possible.

The requirements are more formal:

1. If the article is being viewed on a large screen, the images must be their actual width, which is greater than 800px.
2. If the browser window is reduced to a width of less than 800px or the article is viewed on a phone, then the images should be scaled to fit the width of the screen.
3. The article is sent as an email, so no scripting is allowed and all CSS must be inline in the HTML.

How to achieve this? We can assume that the sizes of the images are known, which means they can be specified in max-width and max-height.

Here is the article template that needs to be modified:

<div style="max-width: 800px;">
  <p>
    Какой-то текст. Какой-то текст.
  </p>

  <p id="p_img">
    <img id="wide_img" src="/img.jpg" alt="Изображение размером 1024x768"/>
  </p>

  <p>
    Какой-то текст. Какой-то текст.
  </p>
</div>

To accomplish the task, it is allowed to add styles to #p_img and #wide_img and insert additional tags around #wide_img .

Tried to add in #p_img style="width: 100%" and in #wide_img style="width: 100%;", but in this case the width of the image does not exceed 800px, which does not satisfy requirement 1.

Answer 1

Why didn't you say right away that you were typing a letter? :)
This categorically changes the question.
In principle, it is impossible to implement your task for all mail clients and web interfaces.
As an argument: the max-width property only works in gmail. So my advice is to design a layout that does not contain rubber pictures.
And also there should not be background images, because they work just as far from everywhere.
habrahabr.ru/post/112163/
habrahabr.ru/post/113709/
habrahabr.ru/post/114119/
habrahabr.ru/post/114234/
habrahabr.ru/company/unisender/blog/115962/
habrahabr.ru/post/ 117613/
habrahabr.ru/post/127266/
habrahabr.ru/post/127403/
habrahabr.ru/post/137978/
Enjoy reading. Everything is dedicated to html letters.

Answer 2

What if you write like this?

#wide_img
{
  max-width: 100%;
}

Answer 3

Faced a similar problem for the arrows in the carousel, depending on the screen resolution.
Did it with jQuery.
Here is the code, but you will need to add it yourself, you will easily understand and handle it:

<script language="JavaScript">
   $(document).ready(function(){ 
  
    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();



    if($(window).width()<900) {
       
    }

$(window).resize(function() {
 if($(window).width()<900) {
       показываем маленькую картинку
    }

 if($(window).width()>=900) {
     показываем большую картинку
    }

});
});

</script>