이미지를 브라우저 창에 맞추는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

이미지를 브라우저 창에 맞추는 방법은 무엇입니까?

DDD

Oct 30, 2024 am 06:29 AM

How to Make an Image Fit the Browser Window?

브라우저 창에 이미지를 맞추는 방법: 종합 가이드

웹 개발 영역에서는 브라우저 내에서 이미지를 원활하게 표시합니다. 창은 독특한 도전 과제를 제시합니다. 브라우저 창과 이미지 크기를 모두 수용할 수 있는 적절한 이미지 크기를 결정하는 것은 여전히 일반적인 딜레마입니다. 이 기사에서는 브라우저 창에 효과적으로 맞도록 이미지 크기를 조정하는 복잡한 과정을 자세히 살펴보고 관련된 복잡한 문제를 포괄적으로 해결합니다.

이미지 크기 조정의 목표

조화로운 통합 달성 웹 레이아웃에 이미지를 추가하려면 다음 기준을 충족해야 합니다.

종종 알 수 없는 브라우저 창의 크기가 이미지 크기를 결정해서는 안 됩니다.
알 수 없는 이미지의 원래 크기 크기 조정 과정을 방해해서는 안 됩니다.
이미지는 원래 비율을 유지하면서 가로 세로 비율을 유지해야 합니다.
이미지는 잘리거나 왜곡되지 않고 창 안에 완전히 표시되어야 합니다.
스크롤바는 바람직하지 않으며 이미지가 창에 맞으면 나타나지 않아야 합니다.
이미지는 창 크기의 변화에 동적으로 반응하여 원래 크기를 초과하지 않고 사용 가능한 공간을 채워야 합니다.

CSS 전용 솔루션

순수한 CSS 솔루션을 찾는 사람들을 위해 다음 코드는 브라우저 창 크기에 따라 이미지를 우아하게 가운데에 배치하고 크기를 조정합니다.

<code class="html"><html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100vh;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="imgbox">
    <img class="center-fit" src='pic.png'>
</div>
</body>
</html></code>

로그인 후 복사

jQuery 기반 솔루션

또는 이 jQuery 기반 솔루션은 이미지 컨테이너(이 경우 본문)의 높이가 브라우저 창 높이와 동일하도록 보장하여 이미지의 최대 높이를 허용합니다. -의도한 대로 작동하는 높이:

<code class="html"><!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .fit {
            max-width: 100%;
            max-height: 100%;
        }
        .center {
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>

<img class="center fit" src="pic.jpg">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
    function set_body_height() {
        $('body').height($(window).height());
    }
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });
</script>

</body>
</html></code>

로그인 후 복사

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.