채택완료
반응형 웹 코딩 시 한개의 이미지를 PC와 스마트폰에서 사이즈를 서로 다르게 지정할 수 있을까요?
반응형 웹을 공부하면서 작업중인데, 그림처럼 같은 이미지를 PC에서는 원하는 사이즈로 작게,
모바일에서는 가득 차게 표시하게 하고 싶은데.. 방법이 있을까요? ㅜㅜ
(아래 4개의 이미지 사이즈도 PC, 모바일에서의 사이즈가 다르게 지정할 수 있으면 정말 속시원하게 해결되는 문제입니다.)
답변 4개 / 댓글 1개
채택된 답변
+20 포인트
미디어쿼리를 사용하면 됩니다. https://www.w3schools.com/css/css3_mediaqueries.asp
예제입니다. (너비가 768px 이하인 경우에만 이미지 너비를 100% 로..)
Copy
<div style="width:100%"><img class="img1" src="test.png" /></div>
<style type="text/css">
@media (max-width: 768px) {
.img1 {width:100%}
}
</style>답변을 작성하려면 로그인이 필요합니다.