일정한 사이즈 div 안에 이미지 넣기 (잘리면서 꽉차게, 잘리지 않고 축소)

+) 이번 프로젝트를 진행하면서 퍼블리싱 부분에서 가장 애를 먹었던 부분.

혹시 제가 놓친 점이나 더 좋은 방법, 다른 방법이 있다면 얼마든지 알려주시기 바랍니다.

 

 

 

1. 잘리면서 꽉차게

* 상위 div 에 꽉 채우고 싶다.

* 비율이 깨지지 않도록 한다.

* 이미지의 가운데 부분이 보여지도록 한다.

* 넘치는 부분은 자른다.

 

 

 

HTML 예시

<div class="image-box">
	<img class="image-thumbnail">
</div>

 

CSS 예시

.image-box {
    width:380px;
    height:220px;
    overflow:hidden;
    margin:0 auto;
}

.image-thumbnail {
    width:100%;
    height:100%;
    object-fit:cover;
}

 

width: 380px, height: 220px 인 상위 div 가 있다.

이 div 에 딱 맞게 어떤 비율의 이미지든 맞춰서 꽉차게 넣고 싶은 경우.

극단적인 예시로 width: 1000px, height: 20px 인 이미지를 width: 380px, height: 220px 인 div 에 딱 맞게 넣으려면

비율이 사정없이 깨질테니 가운데 부분만 보여주고 div 에 들어가지 않는 나머지 영역은 자르기로 한다.

 

포인트)

1. 상위 div 에 일정한 사이즈 width, height 및 overflow:hidden 을 주어 이미지 태그가 해당 사이즈를 벗어나면 잘리도록 한다.

2. 이미지 태그는 원본 비율을 유지하도록 width: 100%, height: 100% 를 주고,

상위 div 크기에 딱 맞아 들어가도록 object-fit: cover; 를 부여한다.

 

 

---

 

 

2. 잘리지 않고 축소하여

* 상위 div 에 꽉 차지 않아도 상관 없는 경우.

      (혹은 이미지 전체를 노출시키고자 할때. 본인은 정보성 이미지를 넣을 때는 1번보다 2번을 택했다.)

* 비율이 깨지지 않도록 한다.

* 잘리는 부분 없이 이미지 전체가 보여지도록 하고 싶다.

 

 

 

HTML 예시

<div class="product-title">
  <div class="product-img-div">
  	<img class="product-img">
  </div>
</div>

 

CSS 예시

.product-title {
    text-align:center;
    display:table;
    border:1px solid #cecece;
    width:280px;
    height:250px;
}

.product-img-div {
    display:table-cell;
    vertical-align:middle;
}

.product-img {
    max-width:180px;
    max-height:180px;
}

 

포인트)

1. 가장 바깥 div 에 display: table

2. 이미지 태그를 감싸는 div (product-img-div) 에 display: table-cell

3. 이미지 태그가 div 안에서 수직 가운데 정렬이 되도록 감싸는 div (product-img-div) 에 vertical-align: middle 을 준다.

4. 이 때, 틀이 되는 div (product-title) 는 width 와 height 값을 지정해 주고

이미지 태그가 div 안에서 가운데 정렬이 되도록 text-align: center 를 부여

5. 여기까지만 하면 상위 div 보다 큰 사이즈의 이미지일 경우 바깥으로 넘치므로, max-width 혹은 max-height 값을 적절하게 준다.

 

 

 

 

 

* 또 다른 방법

 

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML 예시

<div class="image">
</div>

 

CSS 예시

.image {
    width: 300px;
    height: 300px;
    background-image: url(./개미.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border:1px solid black;
}

 

포인트)

1. background-image 에 원하는 이미지의 경로를 적는다.

2. 비율을 맞춰서 넣으려면 background-size: contain 을 준다.

(이 예시는 contain 이지만, div 에 꽉차게 넣으려면 background-size: cover 를 주면 된다. 단, 비율이 깨질 수도 있음.)

3. div 사이즈보다 이미지가 작은 경우, 이미지가 반복되므로 한 장만 보여주기 위해 background-repeat: no-repeat

4. 가운데 정렬을 위해 background-position: center