목차
반응형 image 예제1 - 특정너비를 최대너비로 설정 반응형 image 예제2 - 해당이미지 너비를 최대너비로 설정 반응형 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>
결과보기
