'Hi the images in a web browser are not being responsive [duplicate]

In a website the images are not being responsive... when zooming in or out the images do no resize properly how to fix this issue?? What might be the root cause and possible solution to this

javascriptcssangular


Solution 1:[1]

The best practice is to give max-width to the image container div and width to the image. For e.g:

.img-container {
   max-width: 50%;
   height: 400px;
}
img {
   width: 100%;
   height: auto;
}

Also, check if you have added the meta tag correctly.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Solution 2:[2]

Actually, there is a good reference you can refer to when you need to create responsive images.

W3schools responsive: Responsive Images

.responsive {
  width: 100%;
  height: auto;
}
<img src="image.jpg" alt="image" class="responsive">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 muskaan sharma
Solution 2

Related Questions