alamindevms · May 19, 2023 10:03
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Responsive Images</title>
 		<link rel="stylesheet" href="./style.css" />
 	</head>
 	<body>
 		<div class="wrapper">
 			<div class="img"></div>
 		</div>
 	</body>
 </html>
diff --git a/style.css b/style.css
 * {
 	margin: 0;
 	padding: 0;
 }
 .wrapper {
 	width: 100%;
 }

 .wrapper .img {
 	background: url("./img-1.jpg") no-repeat center; // keep the image in root folder with same name
 	width: 100%;
 	padding-top: 34.81%;
 	background-size: cover;
 }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Responsive Images</title>
	<link rel="stylesheet" href="./style.css" />
	</head>
	<body>
	<div class="wrapper">
	<div class="img"></div>
	</div>
	</body>
	</html>
	* {
	margin: 0;
	padding: 0;
	}
	.wrapper {
	width: 100%;
	}

	.wrapper .img {
	background: url("./img-1.jpg") no-repeat center; // keep the image in root folder with same name
	width: 100%;
	padding-top: 34.81%;
	background-size: cover;
	}