programing

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

padding 2023. 10. 5. 21:15
반응형

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

이것은 사소한 것처럼 보이지만 아무리 많은 연구와 코딩을 해봐도 저는 그것을 작동시킬 수 없습니다.조건:

  1. 브라우저 창 크기를 알 수 없습니다.그러니 절대 픽셀 크기를 포함하는 솔루션을 제안하지 말아주세요.
  2. 이미지의 원래 크기를 알 수 없으며 브라우저 창에 이미 들어맞거나 들어맞지 않을 수 있습니다.
  3. 영상이 수직 및 수평 중앙에 놓입니다.
  4. 영상 비율을 보존해야 합니다.
  5. 영상이 윈도우에 전체적으로 표시되어야 합니다(자르지 않음)
  6. 스크롤 막대가 나타나지 않도록 합니다(이미지가 맞는 경우에는 나타나지 않아야 합니다).
  7. 창 치수가 변경되면 이미지의 크기가 자동으로 조정되어 원래 크기보다 커지지 않고 사용 가능한 모든 공간을 차지합니다.

기본적으로 제가 원하는 것은 이것입니다.

.fit {
  max-width: 99%;
  max-height: 99%;
}
<img class="fit" src="pic.png">

위 코드의 문제점은 작동하지 않는다는 것입니다: 사진은 세로 스크롤 바를 추가하여 필요한 세로 공간을 모두 차지합니다.

내가 마음대로 할 수 있는 것은 PHP, 자바스크립트, JQuery이지만 나는 CSS 전용 솔루션을 위해 죽일 것입니다.IE에서는 안 되더라도 상관없습니다.

업데이트 2018-04-11

여기 자바스크립트가 없는 CSS 전용 솔루션이 있습니다.영상이 동적으로 가운데에 놓이고 창에 맞게 크기가 조정됩니다.

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

합니다([other, old]은 JQuery 를합니다(body에서)가 되도록 .max-height이미지의 속성이 예상대로 작동합니다.클라이언트 창 크기가 조정되면 이미지 크기도 자동으로 조정됩니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .fit { /* set relative picture size */
            max-width: 100%;
            max-height: 100%;
        }
        .center {
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>

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

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

</body>
</html>

참고: 사용자 gutierrezalex는 이 페이지에서 JQuery 플러그인과 매우 유사한 솔루션을 패키지로 제공했습니다.

여기에 간단한 CSS 전용 솔루션(JSFiddle)이 있으며, 어디에서나 작동하며, 모바일 및 IE에는 다음이 포함됩니다.

CSS 2.0:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

img {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

HTML:

<body>
  <img src="images/your-image.png" />
</body>

CSS3는 이 경우 윈도우인 뷰포트에 상대적으로 측정되는 새로운 유닛을 소개합니다.는.vh그리고.vw하는 간단한 CSS 전용 솔루션은 다음과 같습니다.

img {
    max-width: 100%;
    max-height: 100vh;
    height: auto;
}

여기서 주의해야 할 점은 페이지에 높이에 기여하는 다른 요소가 없는 경우에만 작동한다는 것입니다.

이미지 주변에 컨테이너 요소를 넣을 의향이 있다면 순수 CSS 솔루션은 간단합니다.99% 높이는 부모 요소가 자녀를 포함하기 위해 수직으로 확장될 때 의미가 없습니다.부모는 키가 고정되어 있어야 해요, 예를 들면...뷰포트의 높이

HTML

<!-- use a tall image to illustrate the problem -->
<div class='fill-screen'>
    <img class='make-it-fit' 
         src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
</div>

CSS

div.fill-screen {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
}

img.make-it-fit {
    max-width: 99%;
    max-height: 99%;
}

바이올린을 켜세요.

미래 세대를 위해 1-6으로 답하고 7을 하는 솔루션을 원하신다면, 이 문제에 대한 완벽한 솔루션을 개발해 보았습니다.

<!DOCTYPE html>
<html>
  <body style="overflow:hidden; margin:0; text-align:center;">
    <img src="https://file-examples-com.github.io/uploads/2017/10/file_example_JPG_2500kB.jpg" style="height:100vh; max-width:100%; object-fit: contain;">
  </body>
</html>

여기에 이미 몇 가지 답이 있다는 것을 알지만, 여기 제가 사용한 것이 있습니다.

max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;

가로 세로 비율을 유지하는 가장 긴 변으로 화면에 맞게 이미지 크기 조정

img[src$="#fit"] {
    width: 100vw;
    height: auto;
    max-width: none;
    max-height: 100vh;
    object-fit: contain;
}
  • width: 100vw- 이미지 너비가 뷰 포트의 100%가 됩니다.

  • height: auto- 이미지 높이가 비례적으로 조정됩니다.

  • max-height: 100vw- 이미지 높이가 뷰 포트보다 높아지면 화면에 맞게 이미지 폭이 줄어듭니다. 그 결과 다음 속성 때문에 이미지 폭이 줄어듭니다.

  • object-fit: contain- 교체된 컨텐츠는 요소의 컨텐츠 상자에 맞추면서 가로 세로 비율을 유지하도록 크기가 조정됩니다.

    참고:object-fitIE 16.0 이후로만 완전히 지원됩니다.

간단히 해 주세요.감사해요.

.bg {
  background-image: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
}
<div class="bg"></div>

나의 일반적인 게으른 CSS 규칙:

.background{
width:100%;
height:auto;
background: url('yoururl.jpg') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}

처음부터 저해상도일 경우 이미지를 확대할 수 있습니다(즉, 이미지 품질 및 치수 크기와 관련이 있습니다).이미지의 중심을 잡으려면 CSS에서

display:block;    
margin: auto 0; 

이미지의 중심을 잡아줍니다.

사용자의 HTML에서:

<div class="background"></div>
width: 100%;
overflow: hidden;

저는 그게 효과가 있을 거라 믿습니다.

저도 비슷한 요구사항이 있어서 기본적인 CSS와 자바스크립트를 해야 했습니다.JQuery를 사용할 수 없습니다.

이것이 제가 일을 하게 된 것입니다.

<html>
      <head>
            <style>
                   img {
                          max-width: 95% !important;
                          max-height: 95% !important;
                       }
            </style>
            <script>
                   function FitImagesToScreen() {
                      var images = document.getElementsByTagName('img');
                      if(images.length > 0){
                         for(var i=0; i < images.length; i++){
                             if(images[i].width >= (window.innerWidth - 10)){
                                 images[i].style.width = 'auto';
                               }
                            }
                         }
                   }
             </script>
      </head>
      <body onload='FitImagesToScreen()'>
      ----    
      </body>
</html>

참고 : 항상 패딩을 고려해야 하는 부분이 있어서 이미지 폭을 100%로 사용하지 않았습니다.

html, body{width: 99%; height: 99%; overflow: hidden}
img.fit{width: 100%; height: 100%;}

아니면 이것을 확인해보세요: http://css-tricks.com/how-to-resizeable-background-image/

@Rohit의 답변을 기반으로 Chrome에 의해 플래그가 지정된 문제를 수정하고, 이미지의 크기를 안정적으로 조정하며, 수직으로 쌓인 여러 이미지에도 적용됩니다.<img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg">이것을 하는 더 우아한 방법이 있을 것입니다.

<style>
    img {
        max-width: 99vw !important;
        max-height: 99vh !important;
    }
</style>
<script>
    function FitImagesToScreen() {
        var images = document.getElementsByTagName('img');
        if(images.length > 0){
            document.styleSheets[1].rules[0].style["max-height"]=((100/images.length)-1)+"vh";
            for(var i=0; i < images.length; i++){
                if(images[i].width >= (window.innerWidth - 10)){
                    images[i].style.width = 'auto';
                }
            }
        }
    }
</script>
</HEAD>
<BODY onload='FitImagesToScreen()' onresize='FitImagesToScreen()'>
<img src="foo.png">
</BODY>

저는 w3에서 이 순수 CSS 솔루션을 발견하고 테스트했습니다.

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bg {
  /* The image used */
  background-image: url("../yourimage.jpg");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>
    <div class="bg"></div>
</body>
</html>

스타일 태그에 이 코드 사용

<style>
html {
  background: url(imagename) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}
</style>

언급URL : https://stackoverflow.com/questions/6169666/how-to-resize-an-image-to-fit-in-the-browser-window

반응형