![[HTML/CSS]11.Img CSS 와 icon](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-10T06%3A06%3A27.953Z-adf8ec58-ba45-4081-b9ea-008679135831&w=3840&q=75)
1.contain
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.img-box {
width: 300px;
height: 300px;
border: 1px solid black;
}
.img-item {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="img-box">
<img src="Screenshot_122.png" class="img-item" />
</div>
</body>
</html>
2.cover
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.img-box {
width: 300px;
height: 300px;
border: 1px solid black;
}
.img-item {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="img-box">
<img src="Screenshot_122.png" class="img-item" />
</div>
</body>
</html>3.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
box-sizing: border-box;
}
.img-box {
margin-bottom: 5px;
padding: 10px;
width: 300px;
height: 300px;
border: 1px solid black;
}
.img-item {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="img-box">
<img src="Screenshot_122.png" class="img-item" />
</div>
<div class="img-box">
<img src="Screenshot_122.png" class="img-item" />
</div>
</div>
</body>
</html>Share article