(box_img) 가로세로 길이 상관없이 부모박스(사이즈 고정)에 이미지 사이즈 조절

<img> 태그를 이용하지 않고 <div> 박스의 백그라운드로 이용한다.

이 경우 크기에 상관없이 이미지가 자동으로 Box를 채우게 된다.

<div class="box_img_wrap">

<img src="/images/common/photo_02_03.gif" class="box_img">

</div>

[Html]

<div class="box_img_wrap"  style="background-image: url('/images/common/photo_02_03.gif')" >

<img>를 넣지 않는다.

</div>

[CSS]

.box_img_wrap{    // 예시

     width : 300px; height: 200px;

border: 1px solid #d2d2d2;

}

.box_img_wrap{

background-color : #ddd;

background-position : center;

background-repeat : no-repeat;

background-size : cover; ( cover는 여백없이 이미지의 가로 or 세로를 100%로 맞춘다.)

background-size : contain; ( contain은 박스의 크기 안에서 이미지 비율 그대로 100% 보여준다. 여백이 발생하는 단점이 있음.)

}