브라우저 창에 맞게 이미지 크기를 동적으로 조정하는 방법은 무엇입니까?
- Linda Hamilton원래의
- 2024-10-31 01:17:29611검색
브라우저 창에 맞게 이미지 크기를 동적으로 조정하는 방법
가로세로 비율을 유지하면서 브라우저 창 내에 이미지를 넣습니다. 완전히 표시되며 스크롤바를 방지하는 것은 종종 어려운 일입니다. 이러한 문제를 효과적으로 해결하기 위한 두 가지 포괄적인 접근 방식이 있습니다.
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으로 문의하세요.