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;
        }
    </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;
        }
    </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;
        }
 
        img {
            width: 100%;
            height: auto;
        }
 
        .row::after {
            content:"";
            clear: both;
            display: table;
        }
 
        [class*="col-"] {
            float: left;
            padding: 15px;
            width: 100%;
        }
 
        @media only screen and (min-width: 600px) {
            .col-s-1 {width: 8.33%;}
            .col-s-2 {width: 16.66%;}
            .col-s-3 {width: 25%;}
            .col-s-4 {width: 33.33%;}
            .col-s-5 {width: 41.66%;}
            .col-s-6 {width: 50%;}
            .col-s-7 {width: 58.33%;}
            .col-s-8 {width: 66.66%}
            .col-s-9 {width: 75%;}
            .col-s-10 {width: 83.33%;}
            .col-s-11 {width: 91.66%;}
            .col-s-12 {width: 100%;}
        }
 
        @media only screen and (min-width: 768px) {
            .col-1 {width: 8.33%;}
            .col-2 {width: 16.66%;}
            .col-3 {width: 25%;}
            .col-4 {width: 33.33%;}
            .col-5 {width: 41.66%;}
            .col-6 {width: 50%;}
            .col-7 {width: 58.33%;}
            .col-8 {width: 66.66%}
            .col-9 {width: 75%;}
            .col-10 {width: 83.33%;}
            .col-11 {width: 91.66%;}
            .col-12 {width: 100%;}
        }
 
        html {
            font-family: "Lucida Sans", sans-serif;
        }
 
        .header {
            background-color: #9933cc;
            color:#ffffff;
            padding: 15px;
        }
 
        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
 
        .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);
        }
 
        .menu li:hover {
            background-color: #0099cc;
        }
 
        .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);
        }
 
        .footer {
            background-color: #0099cc;
            color: #ffffff;
            text-align: center;
            font-size: 12px;
            padding: 15px;
        }
    </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;
        }
    </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;
        }
    </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;
        }
    </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);
        }
 
        /* For width 400px and larger: */
        /* 400px 너비까지 표시되는 이미지 */
        @media only screen and (min-width:400px) {
            body {
                background-image: url(./img_flowers.jpg);
            }
        }
    </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);
        }
 
        /* For width 400px and larger: */
        /* 400px 너비까지 표시되는 이미지 */
        @media only screen and (min-device-width:400px) {
            body {
                background-image: url(./img_flowers.jpg);
            }
        }
    </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> 요소를 정의해야 합니다.

오션,, Responsive, Web, Design, -, Images