Hi the images in a web browser are not being responsive-CodePudding

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

CodePudding user response：

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">

CodePudding user response：

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" >