브라우저 창에 맞게 이미지 크기를 조정하는 방법은 무엇입니까?

114

이것은 사소한 것처럼 보이지만 모든 연구와 코딩 후에도 작동하지 않습니다. 조건은 다음과 같습니다.

  1. 브라우저 창 크기를 알 수 없습니다. 따라서 절대 픽셀 크기와 관련된 솔루션을 제안하지 마십시오.
  2. 이미지의 원래 크기는 알 수 없으며 브라우저 창에 맞을 수도 있고 맞지 않을 수도 있습니다.
  3. 이미지는 수직 및 수평 중앙에 있습니다.
  4. 이미지 비율은 보존되어야합니다.
  5. 이미지는 창에 전체적으로 표시되어야합니다 (자르지 않음).
  6. 스크롤바가 표시되는 것을 원하지 않습니다 (이미지가 맞으면 표시되지 않아야합니다).
  7. 창 크기가 변경되면 이미지 크기가 자동으로 조정되어 원래 크기보다 크지 않고 사용 가능한 모든 공간을 차지합니다.

기본적으로 내가 원하는 것은 다음과 같습니다.

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

위 코드의 문제는 작동하지 않는다는 것입니다. 그림은 세로 스크롤 막대를 추가하여 필요한 모든 세로 공간을 차지합니다.

내 처분은 PHP, Javascript, JQuery이지만 CSS 전용 솔루션을 위해 죽일 것입니다. IE에서 작동하지 않더라도 상관 없습니다.

html  css 
— Sebnukem
소스
perraultarchitecte.com/en/projects/… 이것은 당신이 원하는 효과입니다. 나도!
1
네, 그렇습니다. 내가 위의 작품을 게시 한 솔루션. 당신은 결과를 볼 수 있습니다 eseb.net/potos.php?f=best_of/fort_collins_winter.jpg
— sebnukem
감사합니다. 정말 도움이됩니다. 크기 조정 기능을 유지하면서 두 개의 이미지를 나란히 배치하기 위해 할 수있는 제안이 있습니까? 감사합니다.
8
"비 요구 사항"이 마음에 듭니다. "IE에서 작동하지 않더라도 상관 없습니다." :)
— Bastian

답변:

122

업데이트 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>

JQuery를 사용하는 [other, old] 솔루션은 이미지 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 플러그인과 매우 유사한 솔루션을 패키징했습니다.

— Sebnukem
소스
6
JS가 필요 없으며 CSS 전용 솔루션이 있습니다.
— Neolisk
— Jason Sturges
51

다음은 간단한 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>
— Neolisk
소스
2
좋은. 그러나 그것은 수직으로 중앙에 있지 않습니다.
— sebnukem
1
@sebnukem : 그럴 예정 이었나요? 어떻게 든 요구 사항에서 이것을 놓쳤습니다. 이것이 사람들이 스크린 샷 / 목업을 사용하는 이유입니다. :) 추신 : 제공된 답변 중 JS 도움으로도 세로 중앙에 배치한다고 생각하지 않습니다.
— Neolisk
3
나는 거기에서 많은 솔루션, 심지어 css-tricks의 솔루션을 시도했습니다. 당신은 완벽하게 매력처럼 작동합니다!
— Stephan
2
최고의 솔루션!
— iVela
24

CSS3는이 경우 창인 뷰포트를 기준으로 측정되는 새로운 단위를 도입합니다. 이들은 vh하고 vw있는 측정 뷰포트의 높이와 폭이 각각. 다음은 간단한 CSS 전용 솔루션입니다.

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

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

— 최대
소스
고마워요. 100vh이미지가 맞지 않지만 97vh잘 작동하는 이유 는 무엇입니까?
— Pavel
아마도 당신은 여백과 본문의 패딩과 같이 높이에 기여하는 다른 이미지가 있습니까? vh말 그대로 뷰의 높이를 의미하므로 다른 요소가 페이지에 높이를 추가하면 전체 페이지가> 100vh가됩니다. 말이 돼?
— Max
감사합니다. 지금 해결되었습니다. 누구든지 동일한 문제가있는 경우 ( .svg파일은 잘 렌더링되지만 이름을 바꾸면 .html부정확 함 이 발생 함) : 브라우저가 자동으로<body>margin:8 는 파일에 <body>태그 가 없더라도 기본 태그를 . 그래서 솔루션 추가<style>body{margin:0}</style>
— Pavel
15

이미지 주위에 컨테이너 요소를 배치하려는 경우 순수한 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%;
}

함께 플레이 바이올린 .

— 마크 E. 하세
소스
<div>대신 에이 작업을 수행 할 수 있습니까 <img>?
— StevoHN
@sebnukem 나는 전에 그 요구 사항을 알지 못했습니다. 내 답변을 업데이트했습니다.
— 마크 E. 하세
이것은 내 넓은 이미지의 높이를 최대화하지 않습니다.
— Sridhar Sarnobat
4

화면 비율을 유지하면서 가장 긴면에 맞게 이미지 크기 조정

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-fit IE 16.0부터 완전히 지원됩니다.

— am0wa
소스
1
그러나 해당 솔루션과 마찬가지로 개체 맞춤은 불행히도 여전히 널리 사용되는 IE11과 호환되지 않는다는 점을 언급해야합니다.
— Blackbam
@DivijSehgal는 당신이 필요하지 않습니다 object-fit또는 명시 적으로 사용할 수 object-fit: fill;있는 기본 .
— am0wa
수직으로 중앙에 배치하려면 어떻게해야합니까?
— Fmstrat
수직으로 중앙에 배치하려면 어떻게해야합니까? 추가하기 : margin : auto;
— cat
이 솔루션은 다른 답변의 html 및 body 스타일과 함께 작동합니다. html, body {width : 100 %; 높이 : 100 %; 여백 : 0; 패딩 : 0; }
— Ivan Kovtun
3

내 일반적인 게으른 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>
— usrrname
소스
3

여기에 이미 몇 가지 답변이 있음을 알고 있지만 여기에 내가 사용한 것이 있습니다.

max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;
— TomC
소스
이유는 모르겠지만 이것은 매력처럼 작동합니다. 설명을 듣고 싶습니다!
— SeedyROM
나도 마찬가지지만, 수 많은 검색 끝에 찾은 것입니다.
— TomC
2

비슷한 요구 사항이 있었고 기본 CSS와 JavaScript를 수행해야했습니다. 사용할 수있는 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 %를 사용하지 않았습니다.

— 로 히트 비핀 매튜스
소스
2
CSS 3를 사용하면 각각 뷰포트 높이 비율과 뷰포트 너비 비율 인 "vh"및 "vw"단위를 얻습니다. 간단히 img {최대 너비 : 95vw; max-height : 95vh;}이면 충분할 수 있습니다.
— bobpaul
답변으로 추가 할 수 있다면 나중에 오는 사람에게 유용 할 수 있습니다.
— Rohit Vipin Mathews
보기 가능 영역에 여러 이미지를 쌓을 수도 있습니다. 이미지가 두 개인 경우 페이지에 img태그 두 개를 넣고 로 body설정 max-height합니다 49vh. 보기 가능 영역에 두 개 이상의 이미지를 표시하는 것은 독자를위한 연습입니다.
— Andrew Beals 19 년
2

간단하게. 감사

.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>
스 니펫 확장

— 하산 시디키
소스
감사! style = "height : 80vh;"만 추가하면됩니다. 이미지 태그에서 나를 위해 트릭을했습니다.
— Tobias J.
1 
width: 100%;
overflow: hidden;

나는 그것이 속임수를 써야한다고 믿는다.

— RobinJ
소스
안녕하세요, 귀하의 답변에 감사 드리지만 이미지 높이가 창보다 클 때 논리적으로 작동하지 않으며 작동하지 않습니다.
— sebnukem
1
글쎄 ... 뭘하려는거야? 스트레칭을 하시겠습니까? 아니면 원래 비율을 그대로 두어야합니까 (이것이 당신이 원하는 것이라고 가정합니다)?
— RobinJ
1

@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>
스 니펫 확장

— 앤드류 빌스
소스
0

스타일 태그에이 코드 사용

<style>
html {
  background: url(imagename) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}
</style>
— Vaibhav Khunt
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.