<h1>원본이미지</h1>
<img src="https://picsum.photos/450/350/?image=8" alt="">
<h1>background-size: contain; </h1>
<div class="wrap test-01"></div>
<h1>background-size: cover; </h1>
<div class="wrap test-02"></div>
<h1>✅ background-size: cover + background-position: center</h1>
<div class="wrap test-03"></div>
.wrap{
width: 300px;
height: 200px;
border: 1px solid #000;
background-image: url('https://picsum.photos/450/350/?image=8');
}
.test-01{
background-size: contain;
}
.test-02{
background-size: cover;
}
.test-03{
background-size: cover;
background-position: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.