DEMO
먼저 아래 데모페이지를 확인해주세요.
브라우저 사이즈에 맞게 이미지 사이즈가 바뀌거나, 다른 이미지로 변경됩니다. 직접 늘렸다 줄였다 해보면서 확인해보세요~
html
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>반응형이미지를 만드는 여러가지 방법</title>
<link rel=“stylesheet” href=“reset.css” >
<link rel=“stylesheet” href=“demo_responsive_img.css” >
<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<script type=“text/javascript” src=“demo_responsive_img.js”></script>
</head>
<body>
<header>
<h1>반응형이미지를 만드는 여러가지 방법</h1>
</header>
<div id=“contents”>
<section>
<h2>이미지를 자동으로 화면에 맞게 리사이즈 되도록</h2>
<p><img src=“img/pic01.jpg” alt=“냥이”></p>
</section>
<section>
<h2>이미지를 배경으로 지정하여 화면에 맞게 리사이즈 되도록</h2>
<div class=“bg”></div>
</section>
<section>
<h2>작은 화면용으로 이미지를 체인지（CSS）</h2>
<p class=“img01”><img src=“img/pic03_pc.jpg” alt=“냥이”></p>
</section>
<section>
<h2>작은 화면용으로 이미지를 체인지（jQuery）</h2>
<p class=“img02”><img class=“switch” src=“img/pic04_pc.jpg” alt=“냥이”></p>
</section>
</div>
<footer>
<p>(C) <a href=“https://nanati.me/”>nanati.me</a> by nanati</p>
</footer>
</body>
</html>
css
header {
padding: 0.8em;
color: #FFF;
font-size: 150%;
text-align: center;
background: #e14d43;
}
#contents {
max-width: 780px;
margin: 0 auto;
text-align: center;
}
#contents h2 {
margin: 2em 0 1em;
font-size: 120%;
color: #b49543;
}
#contents h2:before {
content: “▽ “;
}
/* 이미지를 자동으로 화면에 맞게 리사이즈 되도록 */
img {
max-width: 100%; /* 이미지의 최대사이즈 */
width /***/: auto; /* IE8 */
height: auto;
vertical-align: bottom;
}
/* 이미지를 배경으로 지정하여 화면에 맞게 리사이즈 되도록 */
.bg {
height: 0;
padding-top: 66.666%; /* 500px÷750px×100=66.666…% */
background: url(../img/pic02.jpg) no-repeat center;
background-size: contain;
}
/* 작은 화면용으로 이미지를 체인지（CSS） */
@media screen and (max-width: 640px) {
.img01 {
height: 0;
padding-top: 69.531%; /* 445px÷640px×100=69.531…% */
background: url(../img/pic03_sp.jpg) no-repeat center;
background-size: contain;
}
.img01 img {
display: none; /* PC용 이미지를 보이지 않게 처리 */
}
}
jQuery
$(function () {
var $setElem = $('.switch'),
pcName = '_pc',
spName = '_sp',
replaceWidth = 641;
$setElem.each(function () {
var $this = $(this);
function imgSize() {
if (window.innerWidth > replaceWidth) {
$this.attr('src', $this.attr('src').replace(spName, pcName)).css({
visibility: 'visible'
});
} else {
$this.attr('src', $this.attr('src').replace(pcName, spName)).css({
visibility: 'visible'
});
}
}
$(window).resize(function () {
imgSize();
});
imgSize();
});
});
이미지를 자동으로 화면에 맞게 리사이즈 되도록
이제는 흔하게 쓰이는 내용이기 때문에 모르는 분은 안계실거라 생각하지만, 어디까지나 모르는 분을 위해 정리하는 차원에서!max-width:100%;로 지정하면 이미지가 부모요소로부터 삐져나오지 않도록 합니다. IE8에서는 옆으로만 늘어나는 버그가 있으므로, 3번째 줄에width /***/:auto;의 핵을 써줍니다. (슬슬 IE8 버려도 될 것도 같은데 일단은…)
html
<section>
<h2>이미지를 자동으로 화면에 맞게 리사이즈 되도록</h2>
<img src="img/pic01.jpg" alt="">
</section>
css
img {
max-width: 100%; /* 이미지의 최대사이즈 */
width /***/: auto; /* only IE8 */
height: auto;
vertical-align: bottom;
}
이미지를 배경으로 지정하여 화면에 맞게 리사이즈 되도록
배경화면을 브라우저에 꽉차게 표시하기 위해서는 background-size:contain;로 배경 화면의 비율을 유지한 채로 표시하고 높이를 padding-top(또는 padding-bottom)으로 조정합니다.
높이의 계산 방법은 높이 ÷ 폭 × 100 입니다. 배경으로 적용한 이미지의 사이즈를 적용하면 500px ÷ 750px × 100 = 66.666…%입니다. 이를 응용하면 Youtube 등의 소스 코드에도 대응 할 수 있습니다.
html
<section>
<h2>이미지를 배경으로 지정하여 화면에 맞게 리사이즈 되도록</h2>
<div class="bg"></div>
</section>
css
.bg {
height: 0;
padding-top: 66.666%; /* 500px÷750px×100=66.666...% */
background: url(img/pic02.jpg) no-repeat center;
background-size: contain;
}
작은 화면용으로 이미지를 체인지（CSS）
PC용과 스마트폰용의 이미지를 각각 준비하여, css의 미디어쿼리를 써서 이미지를 바꿔주는 방법입니다.
이미지를<img>로 그대로 표시하고, 브라우저 사이즈가 지정한 px보다 작아졌을 때 스마트폰용 이미지로 대체되어 표시됩니다.
html
<section>
<h3>작은 화면용으로 이미지를 체인지（CSS）</h3>
<p class="img01"><img src="img/pic03_pc.jpg" alt=""></p>
</section>
css
@media screen and (max-width: 640px) {
.img01 {
height: 0;
padding-top: 69.531%; /* 445px÷640px×100=69.531...% */
background: url(../img/pic03_sp.jpg) no-repeat center;
background-size: contain;
}
.img01 img {
display: none; /* PC용 이미지를 보이지 않게 처리 */
}
}
작은 화면용으로 이미지를 체인지（jQuery）
이번에는 jQuery를 이용하여 이미지를 PC용, 스마트폰용으로 바꿔줍니다.
이미지에 switch라는 클래스명을 주고, 화면이 작아졌을 때 이미지를 변경하도록 jQuery에서 처리합니다.
html
<section>
<h2>작은 화면용으로 이미지를 체인지（jQuery）</h2>
<p class="img02"><img src="img/pic04_pc.jpg" alt="" class="switch"></p>
</section>
jQuery
$(function () {
var $setElem = $('.switch'),
pcName = '_pc',
spName = '_sp',
replaceWidth = 641;
$setElem.each(function () {
var $this = $(this);
function imgSize() {
if (window.innerWidth > replaceWidth) {
$this.attr('src', $this.attr('src').replace(spName, pcName)).css({
visibility: 'visible'
});
} else {
$this.attr('src', $this.attr('src').replace(pcName, spName)).css({
visibility: 'visible'
});
}
}
$(window).resize(function () {
imgSize();
});
imgSize();
});
});
jQuery소스는 아래 사이트의 코드를 모셔왔습니다. (일본어)
jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験
댓글
안녕하세요. 덕분에 많은 도움 됐습니다.
그런데 혹시 마지막 단락 jquery로 작은 사이즈일 때 이미지 체인지 부분에서
$(window).resize(function () {
imgSize();
});
imgSize();
});
});
요 부분에 마지막에 imgSize() 가 한번 더 들어간 이유를 알 수 있을까요? 마지막부분을 지웠을 때랑 차이점을 도무지 못찾겠어서 질문드립니다.ㅜ 감사합니다.
마지막 imgSize();는 문서의 로딩이 끝났을 때 리사이징
$(window).resize안에 있는 imgSize();는 브라우저 창의 크기가 변했을 때 리사이징
해주는 내용입니다~
공유 감사합니다.. 소스적용해보구 있는데 작은화면에서 이미지 체인지 파트에서 pc용 이미지를 안보이게 하려면 어떻게 하면 될까요?ㅠ 작은화면에서 사이즈는 줄어드는데 이미지 두개가 나란히 보입니당 ㅠㅠ
작은 화면에서는 PC용 이미지를 보이지 않게 설정해주셔야 합니다.
「작은 화면용으로 이미지를 체인지」부분에서
css로 display: none; 설정 한 부분을 참고하시면 될거예요~
엄청 헤매다가 여기서 성공햇어요 감사합니다^^!
와~ 다행입니다^^
참고가 되셨다니 기뻐요~
브라우저 퍼센트에 따라서 contents 이미지크기를 똑같이하고싶었는데 ㅠㅠㅠ 덕분에 적용 잘한거같아요 감사합니다.
방문, 댓글 감사해요^^
도움이 되셨다니 기분 좋습니다~
좋은 소스 감사합니다!! ^^
감사합니다 ^^ 잘 사용해주세요~
검색으로 들어왔습니다
글 올려주신게 정성이 가득해보여요
저에게는 아직 어렵지만 좋은 글 감사합니다
안녕하세요^^ 방문, 댓글 감사합니다~
도움이 되셨다니 기쁠따름이예요~~~
자주 놀러오세요 ㅎ
배경이미지를 모바일에 적용하려고 찾다가 오게된 나나티님 글
역시 … 주옥같은 글이 가득하네요
ㅋㅋ 주옥같은 글이라는 말이 왜 욕으로 들리는지 제 맘에 좀 썩었나봐요 ㅠ ㅠㅋㅋㅋㅋ 댓글 감사합니다 해피정님 ㅎ
이미지를 배경화면을 처리하고 그 위에 타이포를 얹고싶은데 그럴땐 어떻게 하나요?
이미지 영역 아래로 타이포가 나타나요..
배경화면으로 처리한 div안으로 내용을 쓰시면(p태그 등)
배경 이미지 위로 글씨가 나옵니다^^;;
작성하신 코드나, 테스트링크를 주시지 않으면 정확히 답변 드리기가 어려워요.
우와 멋지네요.
허락도 안 받고 먼저 긁어 갑니다.
좋은 글 감사합니다.
퍼가시는 것은 문제 없는데
전체적으로 긁어가시면 안됩니다^^
출처는 항상 밝혀주시구요~
전체 폭에 맞게 사이즈를 조절하는것이 아닌
이미지의 크기를 특정 비율로 줄일 수 는 없나요?
사이트 로고를 모바일에 맞게 줄이고 싶은데 말이죠
max-width 설정 후
width를 %로 조절하시면 가능합니다.
안녕하세요 나나티님…
이미지 리사이징으로 소스검색하다가 찾아오게 되었습니다.
전 초보라서… 보통 이미지만 만들어서 이벤트페이지만 만드는데요.
모바일에서도 잘 보일수 있게 해보려고 합니다.
알려주신데로 했는데도 잘안되고 이해도 안되서요 ㅠㅠ
황세훈님 안녕하세요^^
방문, 댓글 감사합니다.
잘 모르시는 부분의 코드를 알려주시거나,
적용하고 계신 사이트 주소를 알려주시면 확인해 드릴수가 있는데,
어떤 부분이 이해가 안되시는지 댓글로 남기기 어려우시면
프로필란의 메일주소로 보내주시기 바랍니다^^
정말 도움이 되었습니다~ ㅎㅎ
댓글 감사합니다^^
더 많은 도움 드릴 수 있게 노력할게요 ㅎ
그간지러운 부분을 씨게 긁어준듯한 이 기분!
감사합니다. 잘보고 갑니다.
감사합니다^^ 힘이 나네요 ㅎㅎ
와 진짜 최고입니다 !!!
도움이 되셨다면 기쁘겠습니당 ㅎㅎ