브라우저 창에 완벽하게 맞도록 이미지 크기를 조정하는 방법
이미지가 브라우저 창에 딱 맞는지 확인하는 것은 특히 어려운 일이 될 수 있습니다. 알 수 없는 브라우저 크기 및 이미지 비율. 하지만 잘 만들어진 접근 방식을 사용하면 이러한 크기 조정 기능을 구현할 수 있습니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!