Full page responsive image with HTML and CSS-CodePudding

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?

CodePudding user response：

It may Help you :

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

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

CodePudding user response：

You can use the background image property Check here - W3schools

CodePudding user response：

You have to reset the browser added styles to the body tag by removing the padding and margin from it, feel free to add this at the top of your styles:

body {
  padding: 0;
  margin: 0;
}
html, body, img {
  max-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
  overflow-x: hidden;
}

CodePudding user response：

If you want the image to cover full page, better use background-image and background-size cover, using this way your aspect ratio is also maintained

html, body {
  height: 100%;
}
body {
 background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg');
 background-size: cover;
}

<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>
</body>
</html>

CodePudding user response：

Try this

body {
  padding: 0;
  margin: 0;
}
img {
  max-width: 100%; 
  height: auto;
  width: 100%;
}

<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="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" />
</body>
</html>