WidthPercentage And HeightAuto

====== 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===== [[https://www.w3schools.com/css/css_rwd_images.asp|CSS Responsive Web Design - images]]\\ =====Using The width Property===== width 속성이 백분율로 설정되고 height 속성이 "auto"로 설정되어 있으면 이미지가 반응형으로 확대 및 축소됩니다.\\





    
    
    
    WidthPercentage And HeightAuto
    


    
    
    Resize the browser window to see how the imgae will scale.

\\ 위의 예에서 이미지는 원래 크기보다 크게 확대될 수 있습니다.\\ 대부분의 경우 더 나은 해결 방법은 대신 max-width 속성을 사용하는 것입니다.\\ =====Using The max-width Property===== ''%%max-width%%'' 속성이 100%로 설정된 경우, 필요한 경우 이미지가 축소되지만 원래 크기보다 크게 확대되지는 않습니다.\\





    
    
    
    WidthPercentage And HeightAuto
    


    
    
    Resize the browser window to see how the imgae will scale 
    when the width is less than 460px.

=====Add an Image to The Example Web Page=====





    
    
    
    Add an Image to The Example Web Page
    


    
        Chania
    

    
        
            
                The Flight
                The City
                The Island
                the Food
            
        

        
            The City
            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.
            
        

        
            
                What?
                Chania is a city on the island of Crete.
                Where?
                Crete is a Greek island in the Mediterranean Sea.
                How?
                You can reach Chania airport from all over Europe.
            
        
    

    
        Resize the browser window to see how the content respond to the resizing.

=====Background Images===== 배경 이미지는 크기 조정(resizing) 및 크기 조정(scaling)에도 반응할 수 있습니다.\\ \\ 여기에서는 세 가지 방법을 보겠습니다.\\ \\ 1. ''%%background-size%%'' 속성이 "contain"으로 설정되어 있으면,\\ 배경 이미지의 크기가 조절되고 콘텐츠 영역에 맞게 조정됩니다.\\ 그러나 이미지는 자체의 종횡비(aspect ratio: 이미지의 너비와 높이 사이의 비례 관계)를 유지합니다.\\





    
    
    
    Background Images
    


    
    Resize the browser window to see the effect.

\\ 2. ''%%background-size%%'' 속성이 "100% 100%"로 설정되면,\\ 배경 이미지가 전체 콘텐츠 영역을 덮도록 늘어납니다.\\





    
    
    
    Background Images
    


    
    Resize the browser window to see the effect.

\\ 3. ''%%background-size%%'' 속성이 "cover"로 설정되어 있으면,\\ 배경 이미지가 전체 콘텐츠 영역을 덮도록 크기가 조정됩니다.\\ "cover"값은 종횡비를 유지하고, 배경 이미지의 일부가 잘릴 수 있습니다.\\





    
    
    
    Background Images
    


    
    Resize the browser window to see the effect.

=====DifferentImages for Different Devices===== 큰 이미지는 큰 컴퓨터 화면에서는 완벽할 수 있지만, 작은 장치에서는 쓸모가 없습니다.\\ 어쨌든 축소해야 할 때 왜 큰 이미지를 로드합니까?\\ 부하를 줄이거나 다른 이유로, 미디어 쿼리를 사용하여 다양한 장치들에서 다른 이미지들로 표시할 수 있습니다.\\ \\ 다음은 다양한 장치들에서 표시될 하나의 큰 이미지와 하나의 더 작은 이미지입니다.\\





    
    
    
    Document
    


    
    
       Resize the browser width and the background image will change at 400px.

\\ 브라우저 너비 대신 장치의 너비를 확인하는 ''%%min-width%%'' 대신,\\ 미디어 쿼리 ''%%min-device-width%%''를 사용할 수 있습니다.\\ 그러면 브라우저 창 크기를 조정할 때 이미지가 변경되지 않습니다.\\ \\

=====The HTML