как отрегулировать изображение CSS на мобильном устройстве при сохранении пропорции

Question

наш сайт не реагирует, и одно из требований - отображать изображения на мобильных устройствах, чтобы они соответствовали экрану, и мы сталкиваемся с проблемой, потому что разные размера изображения, загруженные на веб-странице

И это то, что наш CSS код выглядит

@media only screen and (min-width : 320px) and (max-width: 640px) { 


      .article-body div img:not(.logoOP){ 
       width: 320px !important; 
       height: 214px !important; 
      } 
} 

Так это работает отлично на 600 X 400 изображений, так как соотношение сторон одно и то же. Однако, когда у нас есть изображения разного размера, скажем, 400X578, приведенный выше CSS-код не будет работать, и изображения выглядят действительно растянутыми и искаженными.

Что является хорошим решением здесь, так как я не являюсь передним концом Dev.

Любая помощь приветствуется.

Благодаря

Answer 1

Измените CSS к следующему:

@media only screen and (min-width : 320px) and (max-width: 640px) { 

     .article-body div img:not(.logoOP){ 
      width: 320px !important; 
      height: auto; 
     } 
} 

Это позволит вам указать ширину изображения, а высота будет автоматически подстраиваться пропорционально ширине.