Our website is not responsive, and one of the requirements is to ensure that images render properly on mobile devices to fit the screen. However, we are encountering an issue due to the varying sizes of images uploaded to the web page.
Below is the CSS code we are using:
@media only screen and (min-width : 320px) and (max-width: 640px) {
.article-body div img:not(.logoOP){
width: 320px !important;
height: 214px !important;
}
}
While this code works well for 600x400 images with the same aspect ratio, it creates distortion and stretching for images of different sizes, such as 400x578.
As I am not a front end developer, I am seeking a solution to this issue.
Any assistance would be greatly appreciated.
Thank you.