Full page responsive image with HTML and CSS

Issue

i am trying the image to cover full page.

Vertical scroll : allowed

Horizontal scrolling : disallowed

Image : image must show full page without leaving border and responsive based on device size.

html, body, img {
  max-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
  overflow-x: hidden;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<img src="example.png" />
</body>
</html>

The issues is, it leaving a blank space in all 4 side of the screen. How to fix this?

Solution

It may Help you :

 *{
    padding:0px;
    margin:0px;
    }

    img{
    width:100%;
    object-fit:cover;
    max-width: 100%;
    }

Answered By – shammidevd

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.