인프런 커뮤니티 질문&답변

d111님의 프로필 이미지
d111

작성한 질문수

퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)

[실습 파일 완성본] 코딩웍스 추천 UI UX 프로토타입 웹사이트

반응형에서 이미지를 다른 이미지로 바꾸고 싶으면 어떻게 하나요?

작성

·

107

1

pc에서 띄우는 이미지와

모바일에서 띄우는 이미지를 다르게 바꾸려면 어떻게 하면 좋을까요?

 <section class="welcome" id="feature1">
   <img src="images/bg-welcome.jpg">
 </section>

여기서 쓰는 이미지를 바꾸고 싶어요

답변 1

1

미디어쿼리를 속성으로 사용할 수 있는 picture 태그 사용하시면 어렵지 않게 이미지 변경할 수 있습니다.

picture 태그 사용법은 구글링 하시면 찾기 쉽습니다.

구글에서 html picture 라고 검색하시면 됩ㄴ디ㅏ.

<picture>    

<source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">    

<source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">    

<img src="/examples/images/people_200.jpg" alt="People">

</picture>

d111님의 프로필 이미지
d111
질문자

감사합니다

d111님의 프로필 이미지
d111

작성한 질문수

질문하기