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

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

Linda Hamilton

풀어 주다： 2024-10-26 04:09:02

원래의

431명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!