Responsive image to cover whole page-CodePudding

i am trying to add image to my website page to cover whole page in any screen size

*{
         padding:0px;
         margin:0px;
         }
         img {
             width:100%;
         object-fit:cover;
         max-width: 100%;
         min-height: 100%;
         min-width: 100%;
         }

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<div >
            <a href="#" ><img src="img/d.png"> </a>
         </div>

The code work good for desktop but for mobile, some images are not covering 100% width of the screen.

CodePudding user response：

body should have some height and width inorder for image to inherit height from the parent. By using % in unit, it means relative to parent. And so, parent element should also have width and height.

body {
  width: 100%;
  height: 100vh;
}

.responsive {
  width: 100%;
  height: 100%;
}