집 > 기사 > 웹 프론트엔드 > CSS를 사용하여 브라우저 창에서 이미지 크기를 자동으로 조정하는 방법은 무엇입니까?

CSS를 사용하여 브라우저 창에서 이미지 크기를 자동으로 조정하는 방법은 무엇입니까?

Linda Hamilton원래의: 2024-10-26 04:09:02318검색

How to Make Images Automatically Resize with Browser Window Using CSS?

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

문제:

이미지가 자동으로 조정되지 않습니다. 브라우저 창 크기를 조정할 때 크기를 조정하세요. 다음 코드를 시도했지만 작동하지 않습니다.

HTML:

<code class="html"><!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="icons">
            <div id="contact">
                <img src="img/icon_contact.png" alt="" />
            </div>
            <img src="img/icon_links.png" alt="" />
        </div>
    </body>
</html></code>

CSS:

<code class="css">body {
    font-family: Arial;
    font-size: 11px;
    color: #ffffff;
    background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
    background-size: cover;
}

#icons {
    position: absolute;
    bottom: 22%;
    right: 8%;
    width: 400px;
    height: 80px;
    z-index: 8;
    transform: rotate(-57deg); 
    -ms-transform: rotate(-57deg); 
    -webkit-transform: rotate(-57deg); 
    -moz-transform: rotate(-57deg);
}

#contact { 
    float: left; 
    cursor: pointer; 
}


img { 
    max-width: 100%; 
    height: auto; 
}</code>

해결책:

이미지를 유연하게 만들려면 다음 CSS 속성을 추가하세요.

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

max-width를 100%로 설정하면 이미지가 컨테이너 너비를 초과하지 않습니다. 높이를 자동으로 설정하면 크기를 조정하는 동안 이미지의 가로 세로 비율이 유지됩니다. IE8 호환성을 위해서는 width: auto9 재정의가 필요합니다.

이러한 속성을 사용하면 img 태그를 사용하여 추가하는 모든 이미지가 브라우저 창 크기에 맞게 자동으로 크기가 조정됩니다.

JSFiddle 데모:

이 JSFiddle에서 이 솔루션의 라이브 데모를 볼 수 있습니다:

https://jsfiddle.net/mjc5ue0z/

이 솔루션에는 JavaScript가 필요하지 않습니다. 최신 버전의 Chrome, Firefox, IE(테스트 버전)에서 작동합니다.

위 내용은 CSS를 사용하여 브라우저 창에서 이미지 크기를 자동으로 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript firefox css chrome html for while auto using this https

성명：

이전 기사：## 인쇄된 페이지에서 머리글과 바닥글이 반복되는 문제를 표로 해결할 수 있나요?다음 기사：## 인쇄된 페이지에서 머리글과 바닥글이 반복되는 문제를 표로 해결할 수 있나요?