wiki:css:css_note:responsive_web_design_-_images
목차
CSS Responsive Web Design- Images
- description : CSS Responsive Web Design- Images
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-06-29
The source of this article
Using The width Property
width 속성이 백분율로 설정되고 height 속성이 “auto”로 설정되어 있으면 이미지가 반응형으로 확대 및 축소됩니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WidthPercentage And HeightAuto</title> <style> img { width: 100%; height: auto; 25; </style> </head> <body> <img src="img_chania.jpg" width="460" height="345" alt="Chania Image"> <p>Resize the browser window to see how the imgae will scale.</p> </body> </html>
위의 예에서 이미지는 원래 크기보다 크게 확대될 수 있습니다.
대부분의 경우 더 나은 해결 방법은 대신 max-width 속성을 사용하는 것입니다.
Using The max-width Property
max-width 속성이 100%로 설정된 경우, 필요한 경우 이미지가 축소되지만 원래 크기보다 크게 확대되지는 않습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WidthPercentage And HeightAuto</title> <style> img { max-width: 100%; height: auto; 25; </style> </head> <body> <img src="img_chania.jpg" width="460" height="345" alt="Chania Image"> <p>Resize the browser window to see how the imgae will scale when the width is less than 460px.</p> </body> </html>
Add an Image to The Example Web Page
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Add an Image to The Example Web Page</title> <style> * { box-sizing: border-box; 25; img { width: 100%; height: auto; 25; .row::after { content:""; clear: both; display: table; 25; [class*="col-"] { float: left; padding: 15px; width: 100%; 25; @media only screen and (min-width: 600px) { .col-s-1 {width: 8.33%;25; .col-s-2 {width: 16.66%;25; .col-s-3 {width: 25%;25; .col-s-4 {width: 33.33%;25; .col-s-5 {width: 41.66%;25; .col-s-6 {width: 50%;25; .col-s-7 {width: 58.33%;25; .col-s-8 {width: 66.66%25; .col-s-9 {width: 75%;25; .col-s-10 {width: 83.33%;25; .col-s-11 {width: 91.66%;25; .col-s-12 {width: 100%;25; 25; @media only screen and (min-width: 768px) { .col-1 {width: 8.33%;25; .col-2 {width: 16.66%;25; .col-3 {width: 25%;25; .col-4 {width: 33.33%;25; .col-5 {width: 41.66%;25; .col-6 {width: 50%;25; .col-7 {width: 58.33%;25; .col-8 {width: 66.66%25; .col-9 {width: 75%;25; .col-10 {width: 83.33%;25; .col-11 {width: 91.66%;25; .col-12 {width: 100%;25; 25; html { font-family: "Lucida Sans", sans-serif; 25; .header { background-color: #9933cc; color:#ffffff; padding: 15px; 25; .menu ul { list-style-type: none; margin: 0; padding: 0; 25; .menu li { padding: 8px; margin-bottom: 7px; background-color: #33b5e5; color: #ffffff; box-shadow: 1px 3px rgba(0, 0, 0, 0.12) 0 1px 2px rgba(0, 0, 0, 0.24); 25; .menu li:hover { background-color: #0099cc; 25; .aside { background-color: #33b5e5; padding: 15px; color: #ffffff; text-align: center; font-size: 14px; box-shadow: 1px 3px rgba(0, 0, 0, 0.12) 0 1px 2px rgba(0, 0, 0, 0.24); 25; .footer { background-color: #0099cc; color: #ffffff; text-align: center; font-size: 12px; padding: 15px; 25; </style> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class="row"> <div class="col-3 col-s-3 menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>the Food</li> </ul> </div> <div class="col-6 col-s-9"> <h1>The City</h1> <p>Chania is the capital of the Chania regionon the island of Crete. The city can be divided in two parts, the old townand the modern city.</p> <img src="/img_chania.jpg" alt=""> </div> <div class="col-3 col-s-12"> <div class="aside"> <h2>What?</h2> <p>Chania is a city on the island of Crete.</p> <h2>Where?</h2> <p>Crete is a Greek island in the Mediterranean Sea.</p> <h2>How?</h2> <p>You can reach Chania airport from all over Europe.</p> </div> </div> </div> <div class="footer"> <p>Resize the browser window to see how the content respond to the resizing.</p> </div> </body> </html>
Background Images
배경 이미지는 크기 조정(resizing) 및 크기 조정(scaling)에도 반응할 수 있습니다.
여기에서는 세 가지 방법을 보겠습니다.
1. background-size 속성이 “contain”으로 설정되어 있으면,
배경 이미지의 크기가 조절되고 콘텐츠 영역에 맞게 조정됩니다.
그러나 이미지는 자체의 종횡비(aspect ratio: 이미지의 너비와 높이 사이의 비례 관계)를 유지합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Background Images</title> <style> div { border: 2px solid darkblue; width: 100%; height: 400px; background-image: url(img_flowers.jpg); background-repeat: no-repeat; background-size: contain; 25; </style> </head> <body> <p>Resize the browser window to see the effect.</p> <div></div> </body> </html>
2. background-size 속성이 “100% 100%“로 설정되면,
배경 이미지가 전체 콘텐츠 영역을 덮도록 늘어납니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Background Images</title> <style> div { width: 100%; height: 400px; background-image: url(img_flowers.jpg); background-size: 100% 100%; border: 2px solid darkblue; 25; </style> </head> <body> <p>Resize the browser window to see the effect.</p> <div></div> </body> </html>
3. background-size 속성이 “cover”로 설정되어 있으면,
배경 이미지가 전체 콘텐츠 영역을 덮도록 크기가 조정됩니다.
“cover”값은 종횡비를 유지하고, 배경 이미지의 일부가 잘릴 수 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Background Images</title> <style> div { width: 100%; height: 400px; background-image: url(img_flowers.jpg); background-size: cover; border: 2px solid darkblue; 25; </style> </head> <body> <p>Resize the browser window to see the effect.</p> <div></div> </body> </html>
DifferentImages for Different Devices
큰 이미지는 큰 컴퓨터 화면에서는 완벽할 수 있지만, 작은 장치에서는 쓸모가 없습니다.
어쨌든 축소해야 할 때 왜 큰 이미지를 로드합니까?
부하를 줄이거나 다른 이유로, 미디어 쿼리를 사용하여 다양한 장치들에서 다른 이미지들로 표시할 수 있습니다.
다음은 다양한 장치들에서 표시될 하나의 큰 이미지와 하나의 더 작은 이미지입니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* For width smaller than 400px: */ /* 너비 399px이하로 표시되는 이미지 */ body { background-repeat:no-repeat; background-image: url(./img_smallflower.jpg); 25; /* For width 400px and larger: */ /* 400px 너비까지 표시되는 이미지 */ @media only screen and (min-width:400px) { body { background-image: url(./img_flowers.jpg); 25; 25; </style> </head> <body> <p style="margin-top: 360px;"> Resize the browser width and the background image will change at 400px. </p> </body> </html>
브라우저 너비 대신 장치의 너비를 확인하는 min-width 대신,
미디어 쿼리 min-device-width를 사용할 수 있습니다.
그러면 브라우저 창 크기를 조정할 때 이미지가 변경되지 않습니다.
<style> /* For width smaller than 400px: */ /* 너비 399px이하로 표시되는 이미지 */ body { background-repeat:no-repeat; background-image: url(./img_smallflower.jpg); 25; /* For width 400px and larger: */ /* 400px 너비까지 표시되는 이미지 */ @media only screen and (min-device-width:400px) { body { background-image: url(./img_flowers.jpg); 25; 25; </style>
The HTML <picture> Element
HTML <picture> 요소는 웹 개발자에게 이미지 자원을 지정하는 데 더 많은 유연성을 제공합니다.
<picture> 요소의 가장 일반적인 용도는 반응형 디자인에 사용되는 이미지입니다.
뷰포트 너비에 따라 확대 또는 축소되는 하나의 이미지를 사용하는 대신,
브라우저 뷰포트를 더 멋지게 채우도록 여러 이미지를 디자인할 수 있습니다.
<picture> 요소는 <video> 및 <audio> 요소와 유사하게 작동합니다.
다른 소스를 설정하고, 기본 설정에 맞는 첫 번째 소스가 사용되는 소스입니다.
<body> <picture> <source srcset="./img_smallflower.jpg" media="(max-width: 400px)"> <source srcset="./img_flowers.jpg"> <img src="./img_flowers.jpg" alt="Flowers" style="width:auto;"> <p> Resize the browser width and the background image will change at 400px </p> </picture> </body>
srcset 속성은 필수이며, 이미지의 소스를 정의합니다.
media 속성은 선택 사항이며, CSS @media rule에서 찾은 미디어 쿼리를 허용합니다.
또한 <picture> 요소를 지원하지 않는 브라우저에 대해 <img> 요소를 정의해야 합니다.
/volume1/web/dokuwiki/data/pages/wiki/css/css_note/responsive_web_design_-_images.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
