왜곡 없이 브라우저 창에 맞게 이미지 크기를 조정하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

왜곡 없이 브라우저 창에 맞게 이미지 크기를 조정하려면 어떻게 해야 합니까?

Barbara Streisand

Nov 01, 2024 pm 03:51 PM

How Can I Resize an Image to Fit the Browser Window Without Distortion?

왜곡 없이 브라우저 창에 맞게 이미지 크기 조정

브라우저 창에 맞게 이미지 크기를 조정하는 것은 겉으로는 간단한 솔루션을 사용하는 일반적인 작업입니다. 그러나 비율 유지 및 자르기 방지와 같은 특정 요구 사항을 준수하는 것은 어려울 수 있습니다.

스크롤 막대와 자바스크립트가 없는 솔루션(CSS만 해당)

<code class="html"><html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .imgbox {
      display: grid;
      height: 100%;
    }
    .center-fit {
      max-width: 100%;
      max-height: 100vh; /* vh ensures height matches browser window */
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="imgbox">
    <img class="center-fit" src='pic.png'>
  </div>
</body>
</html></code>

로그인 후 복사

이것은 솔루션은 CSS 그리드를 사용하여 이미지 컨테이너가 전체 창 높이를 차지하도록 합니다. 그런 다음 이미지는 해당 컨테이너 내에서 가로 및 세로로 맞도록 설정되어 가로 세로 비율을 유지하고 스크롤 막대 추가를 방지합니다.

JQuery를 사용한 솔루션

Javascript를 사용할 수 있는 경우 , 또 다른 접근 방식은 다음과 같습니다.

<code class="html"><html>
<body>

<img class="center fit" src="pic.jpg" >

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
  function set_body_height() {
    $('body').height($(window).height());
  }
  $(document).ready(function() {
    $(window).bind('resize', set_body_height);
    set_body_height();
  });
</script>

</body>
</html></code>

로그인 후 복사

여기서 본문 높이는 창 높이와 일치하도록 설정되어 이미지의 max-height 속성이 올바르게 작동하도록 합니다. 창 크기 조정 이벤트도 처리하여 창 크기가 조정될 때 본체 높이와 이미지 크기를 자동으로 조정합니다.

위 내용은 왜곡 없이 브라우저 창에 맞게 이미지 크기를 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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