반응형 웹 코딩 시 한개의 이미지를 PC와 스마트폰에서 사이즈를 서로 다르게 지정할 수 있을까요?

반응형 웹 코딩 시 한개의 이미지를 PC와 스마트폰에서 사이즈를 서로 다르게 지정할 수 있을까요?

QA

반응형 웹 코딩 시 한개의 이미지를 PC와 스마트폰에서 사이즈를 서로 다르게 지정할 수 있을까요?

본문

반응형 웹을 공부하면서 작업중인데,  그림처럼 같은 이미지를 PC에서는 원하는 사이즈로 작게, 

모바일에서는 가득 차게 표시하게 하고 싶은데.. 방법이 있을까요? ㅜㅜ 

 

(아래 4개의 이미지 사이즈도 PC, 모바일에서의 사이즈가 다르게 지정할 수 있으면 정말 속시원하게 해결되는 문제입니다.)

 

 

3024413178_1515069674.7795.jpg

 

이 질문에 댓글 쓰기 :

답변 4

미디어쿼리를 사용하면 됩니다. https://www.w3schools.com/css/css3_mediaqueries.asp

 

예제입니다. (너비가 768px 이하인 경우에만 이미지 너비를 100% 로..)


<div style="width:100%"><img class="img1" src="test.png" /></div>
 
<style type="text/css">
@media (max-width: 768px) {
   .img1 {width:100%}
}
</style>
답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT