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

Barbara Streisand
풀어 주다: 2024-10-31 07:24:30
원래의
725명이 탐색했습니다.

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

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

이미지가 브라우저 창에 딱 맞는지 확인하는 것은 특히 어려운 일이 될 수 있습니다. 알 수 없는 브라우저 크기 및 이미지 비율. 하지만 잘 만들어진 접근 방식을 사용하면 이러한 크기 조정 기능을 구현할 수 있습니다.

CSS 전용 솔루션(2018년 4월 업데이트)

최신 CSS를 지원하는 브라우저의 경우 순전히 CSS 솔루션은 다음과 같이 구현할 수 있습니다.

<code class="html"><div class="imgbox">
    <img class="center-fit" src="pic.png">
</div></code>
로그인 후 복사
<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 솔루션

또 다른 접근 방식은 jQuery를 활용하여 본문 높이를 창 높이와 동일하게 설정하여 이미지의 max-height 속성이 예상대로 작동하도록 허용합니다.

<code class="html"><img class="center fit" src="pic.jpg"></code>
로그인 후 복사
<code class="javascript">function set_body_height() {
    $('body').height($(window).height());
}
$(document).ready(function() {
    $(window).bind('resize', set_body_height);
    set_body_height();
});</code>
로그인 후 복사
<code class="css">* {
    padding: 0;
    margin: 0;
}
.fit {
    max-width: 100%;
    max-height: 100%;
}
.center {
    display: block;
    margin: auto;
}</code>
로그인 후 복사

이것은 해결책에는 창 높이와 일치하도록 본체 높이를 설정하여 창 크기 변경에 따라 이미지 크기를 동적으로 조정할 수 있는 방법이 포함됩니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿