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

집

웹 프론트엔드

CSS 튜토리얼

브라우저 창에 맞게 이미지 크기를 동적으로 조정하는 방법은 무엇입니까?

Linda Hamilton

Oct 31, 2024 am 01:17 AM

How to Dynamically Resize an Image to Fit the Browser Window?

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

가로세로 비율을 유지하면서 브라우저 창 내에 이미지를 넣습니다. 완전히 표시되며 스크롤바를 방지하는 것은 종종 어려운 일입니다. 이러한 문제를 효과적으로 해결하기 위한 두 가지 포괄적인 접근 방식이 있습니다.

1. CSS 전용 솔루션(2018 업데이트)

CSS의 그리드 레이아웃과 자동 여백 기능을 활용하는 이 방법은 포괄적인 CSS 전용 솔루션을 제공합니다. 아래 코드 조각은 브라우저 창에 맞게 이미지를 동적으로 중앙에 배치하고 크기를 조정합니다.

<code class="html"><div class="imgbox">
  <img class="center-fit" src="pic.png">
</div></code>

로그인 후 복사

CSS:

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

로그인 후 복사

2. JavaScript/jQuery 솔루션

이 접근 방식은 jQuery를 사용하여 이미지 컨테이너의 높이를 동적으로 설정하여 이미지의 max-height 속성이 의도한 대로 작동하도록 합니다. 브라우저 창의 크기가 조정되면 이미지의 크기도 자동으로 조정됩니다.

<code class="html"><body>
  <img class="center fit" src="pic.jpg">
</body></code>

로그인 후 복사

<code class="javascript">    // Set body height to window height
    function set_body_height() {
        $('body').height($(window).height());
    }
    // On DOM ready and window resize, adjust body height
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });</code>

로그인 후 복사

참고: 사용자 Gutierrezalex가 만든 jQuery 플러그인으로 유사한 솔루션을 사용할 수 있습니다.

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

본 웹사이트의 성명

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