[css_반응형] image

image

-전체 이미지가 화질이 깨지지 않게 나온다

width속성이 백분율로 설정되고 속성 height이 "자동"으로 설정되면 이미지가 반응하고 확대 및 축소된다?

.img { 

  width: 80%; /*가로 길이는 컨테이너의 80% 유지. 아무리 확대, 축소해도 변함없음*/

  height: auto;

}

 

-80%에서 더이상 커지지 않는다

.img {

  max-width: 800%; 

  height: auto;

}

 

-maximum 사이즈 이내로 국한 시키는 경우: 확대, 축소 가능

.img {

  width: 100%; 

  height: auto;

  max-width: 400px;

}

 

 

background-image

-잘리지 않고 이미지가 전부 보인다. 빈 공간 발생 가능

background-size: contain

 

-전부 다 나오지만 종횡비 유지 x. content 영역에 빈 공간 없이 가득 채워지며 좌우 채워지게 늘어/줄어든다

background-size: 100% 100%;

 

-종횡비 유지되지만 컨테이너 밖으로 나간 이미지는 잘린다

background-size: cover;