스크롤 막대 없이 이미지를 브라우저 창에 완벽하게 맞추는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

스크롤 막대 없이 이미지를 브라우저 창에 완벽하게 맞추는 방법은 무엇입니까?

Patricia Arquette

Nov 01, 2024 am 07:33 AM

How to Make an Image Fit Perfectly in a Browser Window Without Scrollbars?

브라우저 창에 딱 맞게 이미지 크기를 조정하는 방법

브라우저 창 범위에 맞게 이미지 크기를 조정하면 다음과 같은 문제가 발생할 수 있습니다. 이는 특히 창 크기, 이미지 크기 및 스크롤 막대와 같은 다양한 요소를 고려해야 할 때 어려운 일입니다.

문제:

목표는 이미지의 크기를 유지하는 것입니다. 가로 세로 비율을 유지하고 스크롤바 표시를 방지하며 이미지가 원래 크기를 초과하지 않고 사용 가능한 최대 공간을 차지하도록 합니다.

CSS 전용 솔루션:

업데이트( 2018-04-11):

<code class="css">* { margin: 0; padding: 0; }
.imgbox { display: grid; height: 100%; }
.center-fit { max-width: 100%; max-height: 100vh; margin: auto; }</code>

로그인 후 복사

이 코드는 CSS를 통해서만 원하는 결과를 얻습니다. 이미지는 전체 창 높이를 차지하는 그리드 표시 컨테이너 내에 있습니다. 이미지 자체는 이 컨테이너에 맞게 너비와 높이를 모두 조정하여 창 중앙에 위치하도록 하면서 가로 세로 비율을 유지합니다.

JQuery 솔루션:

<code class="html"><!DOCTYPE html>
<html>
<head>
<style>
    * { padding: 0; margin: 0; }

    .fit { /* set relative picture size */
        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">
    function set_body_height() { // set body height = window height
        $('body').height($(window).height());
    }

    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });
</script>

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

로그인 후 복사

JQuery 솔루션에는 창 높이와 일치하도록 본체 높이를 설정하는 작업이 포함됩니다. 이렇게 하면 이미지의 max-height 속성이 의도한 대로 작동하여 이미지를 창 경계 내에 제한할 수 있습니다. 또한 창 크기 조정 시 이미지 크기도 자동으로 조정됩니다.

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

본 웹사이트의 성명

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