Chrome 스크롤바의 크기가 HTML 크기로 조정됩니다

Firefox 또는 IE가 아닌 Chrome에서만 발생합니다.Chrome 스크롤바의 크기가 HTML 크기로 조정됩니다

텍스트가 오버레이 된 세 개의 이미지가 있습니다. 3 개의 이미지가 반응하며 브라우저 창 전체를 차지합니다. 여기에 스크린 샷입니다 :

나는 그것이 좁은, 어떻게 든 HTML 페이지의 크기보다 작은되고 만들 수있는 창 크기를 조정

. 윈도우가 다시 조정하는 것, 그리고 모든 것이 잘되기 전에이 매우 빠르게 발생

: 여기에 예를 들어. 그러나, 나는 여전히 그것을 고치고 싶습니다.

vh 방법 대신 flexbox 바닥 글을 사용해 보았지만 도움이되지 않았습니다.

내 HTML과 CSS는 다음과 같습니다. HTML에 대한 메모 - 3 가지 그림을 모두 공백없이 함께 넣을 수있는 또 다른 방법이 있습니다. 예를 들어 해킹을하는 것은 미안합니다. 그러나 그것은 내가 알 수있는 한 문제의 원천이 아닙니다. 단지 한 장의 그림 만있을 때 발생합니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width"> 
     <link href="styles/index-footer-test-750.css" type="text/css" rel="stylesheet"> 
     <title>Good Boy Dog Care</title> 
    </head> 
    <body> 
     <div class="index-content"> 
     <div id="we-love-dogs-one"><img id="we-love-dogs-one-image" src="images/cute-dog-one-cropped.jpg"><div id="we-love-dogs-one-text"><p>WE</p></div></div><div id="we-love-dogs-two"><img id="we-love-dogs-two-image" src="images/cute-dog-two-cropped.jpg"><div id="we-love-dogs-two-text"><p>LOVE</p></div></div><div id="we-love-dogs-three"><img id="we-love-dogs-three-image" src="images/cute-dog-three-cropped.jpeg"><div id="we-love-dogs-three-text"><p>DOGS</p></div></div> 
     </div> 
     <div class="footer"> 
     </div> 
    </body> 
</html>

그리고 CSS는 :

* { 
    box-sizing: border-box; 
    margin: 0; 
} 

.index-content { 
    min-height: calc(100vh - 2em); 
    padding: 0; 
    margin: 0; 
} 

.footer { 
    height: 2em; 
    background-color: rgba(240, 100, 60, 1); 
    width: 100%; 
    cursor: default; 
} 

    #we-love-dogs-one { 
     width: 34%; 
     display: inline-block; 
     margin: 0; 
     position: relative; 
     text-align: center; 
    } 

     #we-love-dogs-one-image { 
     width: 100%; 
     height: auto; 
     display: block; 
     float: left; 
    } 

     #we-love-dogs-one-text { 
     left: 0; 
     position: absolute; 
     width: 100%; 
     color: white; 
     top: calc(50% - 17px); 
     font-size: 1.5em; 
     display: inline-block; 
     font-family: "Montserrat"; 
    } 

    #we-love-dogs-two { 
     width: 33%; 
     display: inline-block; 
     margin: 0; 
     position: relative; 
     text-align: center; 
     font-family: "Montserrat"; 
    } 

    #we-love-dogs-two-image { 
     width: 100%; 
     height: auto; 
     display: block; 
     float: left; 
    } 

    #we-love-dogs-two-text { 
     left: 0; 
     position: absolute; 
     width: 100%; 
     color: white; 
     top: calc(50% - 24.5px); 
     font-size: 2em; 
     display: inline-block; 
     font-family: "Montserrat"; 
    } 

     #we-love-dogs-three { 
     width: 33%; 
     display: inline-block; 
     margin: 0; 
     position: relative; 
     text-align: center; 
    } 

     #we-love-dogs-three-image { 
     width: 100%; 
     height: auto; 
     display: block; 
     float: left; 
    } 

    #we-love-dogs-three-text { 
     left: 0; 
     position: absolute; 
     width: 100%; 
     color: white; 
     top: calc(50% - 17px); 
     font-size: 1.5em; 
     display: inline-block; 
     font-family: "Montserrat"; 
    }

어떤 도움을 주시면 감사하겠습니다. 감사!

출처

2017-11-27 cliffgallagher

cliffgallagher @, 이미지 당 너비 또는 높이를 거의 설정하지 않고 divs를 사용하여 자동 크기 조정을 시도해보십시오. 예를 들어 게시물은 How do I auto-resize an image to fit a div container입니다.

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

.portrait { 
    height: 80px; 
    width: 30px; 
} 

.landscape { 
    height: 30px; 
    width: 80px; 
} 

.square { 
    height: 75px; 
    width: 75px; 
} 





    Portrait Div 
<div class="portrait"> 
    <img src="http://i.stack.imgur.com/xkF9Q.jpg"> 
</div> 

Landscape Div 
<div class="landscape"> 
    <img src="http://i.stack.imgur.com/xkF9Q.jpg"> 
</div> 

Square Div 
<div class="square"> 
    <img src="http://i.stack.imgur.com/xkF9Q.jpg"> 
</div>

출처

2017-11-27 23:19:44

이 링크는 질문에 대답 할 수 있지만 답변의 필수 부분을 여기에 포함시키고 참조 용 링크를 제공하는 것이 좋습니다. 링크 된 페이지가 변경되면 링크 전용 답변이 유효하지 않게 될 수 있습니다. - [검토 중] (리뷰/저품절 게시물/18080845) – alexi2

감사합니다. 알렉시 덕분에 내가 언급 한 변경 사항을 반영하도록 답변을 편집했습니다. Adam –

Chrome 스크롤바의 크기가 HTML 크기로 조정됩니다

답변

관련 문제