<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;  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.