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

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

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

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