[CSS] 반응형 웹 - 이미지

* image 가  확대축소 되게 하려면  
.responsive1 {
    width: 100%;
    height: auto;   /* 종횡비율 유지 */
}

* 화면이 커져도 이미지 '원래 크기' 이상 늘어나지 않게 하기
.responsive2 {
    max-width: 100%;  /* 이미지 원래의 크기 100% 만큼이 최대치 */
    height: auto;
}

* image를 특정 maximum 사이즈 이내로 국한시킬 경우
.responsive3 {
    width: 100%;
    height: auto;
    max-width: 400px;

---

background-image 또한 크기에 따른 resizing이 가능하다

<style>
div {
  width: 100%;
  height: 400px;
  border: 1px solid red;
  background-image: url('../img/img_flowers.jpg');
  background-repeat: no-repeat;
}

div#bg1 {
  background-size : contain
  이미지의 종횡비(aspect ratio)는 유지된채 content에 맞추어진다.  

  content 에 빈 공간 발생 가능 (no-repeat 인 경우)
}

div#bg2 {
   background-size: 100% 100%;
   배경 이미지는 content 영역에 빈 공간 없이 가득 채워지게 좌우 꽉 채워지게 늘어난다(혹은 줄어든다)
   종횡비는 유지되지 않는다.

}

div#bg3 {
  background-size: cover;
   배경 이미지는 content 영역을 가득 채우긴 하나 이미지의 종횡비가 유지된다. 

   이미지의 잘림(clip) 발생
}