반응형 웹 : 가변이미지

가변이미지

: 이미지 요소에도 상대단위 em , vw, % 등 사용할 수 있습니다.

브라우저에서 이미지는 기본적으로 비율을 유지합니다.

이미지가 원본보다 커지면 이미지 품질이 떨어질 수 있습니다.

max-width 속성은 요소의 최대 너비 제한을 정할 수 있는 속성 입니다.

picture와 source 요소는 이미지를 미디어 조건에 맞게 선택적으로 불러올 수 있는 요소입니다.

---

CSS의 max-width 속성은 너비의 최대값을 지정하여 요소의 너비가 그 이상 커지지 않게 합니다.

 

img {

max-width:200px

}

 

이미지의 200px은 최대 200px임으로 그이상 커질수가 없습니다.

---

img {

max-width:100%

}

 

퍼센트 단위로 지정하면 부모요소 크기에 따라 변하면서도 부모요소보다 커질수는 없습니다.

 

---

picture  :해상도나 이미지를 변환시켜주고 싶을때 사용

<picture>
    <source srcset="./이미지/로운2.jpg" media="(min-width:800px)">
    <img src="./이미지/로운.jpg" alt="">
  </picture>

picture 해당코드로도 사용이 가능합니다.

기본 이미지를 하나 두고 로운이 나왔는데 800px이 넘어가는순간 로운2가 나오게 하는 방식 입니다.