`배경 크기: 커버`를 사용하여 이미지를 반응형으로 만들고 전체 화면 배경을 유지하는 방법은 무엇입니까?

CSS를 사용하여 브라우저 크기에 따라 이미지 크기를 자동으로 조정

이 질문의 목표는 브라우저 창 크기가 조정될 때 이미지 크기가 자동으로 조정되도록 하는 것입니다. , 배경 크기: 표지 효과로 전체 화면 디자인을 유지합니다.

이를 달성하려면 CSS 코드를 다음과 같이 수정하면 됩니다.

<code class="css">img {
    max-width: 100%;
    height: auto;
    width: auto; /* ie8 */
}</code>

최대 너비를 100으로 설정하면 됩니다. % 및 높이를 자동으로 설정하면 이미지가 브라우저 창 크기에 따라 조정됩니다. 너비: auto9; 이 규칙은 브라우저 전반에 걸쳐 일관된 동작을 보장하기 위해 특별히 IE8을 위한 것입니다.

또한 배경 이미지에 background-size:cover 속성을 할당하여 전체 화면 효과를 만들 수 있습니다.

<code class="css">body {
    ...
    background-size: cover;
}</code>

이를 사용하면 수정하면 지정된 배경 효과를 유지하면서 이미지 크기가 자동으로 조정되어 완벽한 반응형 디자인을 보장합니다.

위 내용은 `배경 크기: 커버`를 사용하여 이미지를 반응형으로 만들고 전체 화면 배경을 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!