[responsive] CSS - Responsive Image - (반응형 이미지) ★★★

1. 반응형 image 예제1 - 특정너비를 최대너비로 설정
2. 반응형 image 예제2 - 해당이미지 너비를 최대너비로 설정
3. 반응형 image 예제3 - 해상도별 다른 이미지 노출

반응형 image 예제1 - 특정너비를 최대너비로 설정 

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

<style>

img {

  width: 100%;

  height: auto;

  max-width:700px;

  display:block;

  margin:0 auto;

}

</style>

<img src="https://source.unsplash.com/random">

결과보기

※ max-width 없는 경우, 이미지 가로 길이가 부모너비 100% 차지.

반응형 image 예제2 - 해당이미지 너비를 최대너비로 설정

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

<style>

img {

  max-width: 100%;

  height: auto;

  display:block;

  margin:0 auto;

}

</style>

 

<img src="https://source.unsplash.com/random">

결과보기

반응형 image 예제3 - 해상도별 다른 이미지 노출

※ PC/mobile 다른 이미지 사용.

 

<style>

.pc{}

.mobile{display: none}

@media (max-width:750px ) {

    .pc{display: none}

    .mobile{display: inline;} 

}

</style>

<div>

    <img src="https://i.imgur.com/PQNhCln.gif" class="pc">

    <img src="https://i.imgur.com/YrkG5xB.gif" class="mobile">

</div>

 

결과보기