웹 디자인의 광범위한 이미지

Question

웹 사이트를 코딩하고 www.airbnb.com과 같은 것을 만들려고합니다. 즉, 상단에 정적 막대 (이 부분은 괜찮음)와 큰 중심의 단추가있는 큰 이미지를 의미합니다 .

큰 이미지를 모든 화면 해상도에서 정상적으로 표시하려면 어떻게해야합니까? 현재 1920 * 1080px에서 내 이미지는 큰 버튼이 가운데에 맞춰진 상태로 완벽합니다. 하지만, 내 해상도를 변경하면 이미지가 자르거나 크기가 조정됩니다.

어떻게해야합니까 (CSS 또는 자바 스크립트)?

정말 고마워요!

Answer 1

: 기존 요소에 대한 배경으로 이미지를 사용하는 경우

는 배경에 대한 올바른 styles 설정 예

원래 바탕 화면 배경 :

@media (max-width: 480px) { 

    body { 
     background:url(images/bg3.jpg) no-repeat 0 0; 
    } 

} 

해상도 : 480 픽셀의 최대 해상도 화면에 대한

@media (max-width: 800px) { 

    body { 
     background:url(images/bg2.jpg) no-repeat 0 0; 
    } 

} 

: 800 픽셀의 최대 해상도 화면에 대한

body { 
    background:url(images/bg1.jpg) no-repeat 0 0; 
} 

당신이 선택하는 것은 분명히 당신 자신에게 달려 있습니다.

Answer 2

<img>을 사용하는 경우 width 및 height 속성을 설정하십시오. 당신은 해상도에 따라 물리적으로 다른 크기의 이미지를로드 CSS 미디어 쿼리를 사용할 수

div{ 
    background:url(img_flwr.gif); 
    background-size:80px 60px; 
    background-repeat:no-repeat; 
}