최대 신장이있는 어린이 : 부모를 100 % 오버플로

139

예상치 못한 행동으로 보이는 것이 무엇인지 이해하려고합니다.

컨테이너 안에 최대 높이가 100 % 인 요소가 있으며 최대 높이를 사용하지만 예기치 않게 자식이 부모를 오버플로합니다.

.container {  
    background: blue; 
    padding: 10px; 
    max-height: 200px; 
    max-width: 200px; 
}

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

그러나 부모에게 명시적인 높이가 주어지면 고정됩니다.

테스트 사례 : http://jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

아이가 첫 번째 예에서 부모의 최대 높이를 존중하지 않는 이유를 아는 사람이 있습니까? 왜 명시적인 높이가 필요한가요?

css

— iamkeir
소스

209

당신의 비율을 지정하는 경우 max-height아이에를, 그것은 부모의 실제 높이의 비율이 아닌 부모의 인 max-height, 이상하게도 . 동일하게 적용됩니다 max-width.

따라서 부모에 명시 적 높이를 지정하지 않으면 max-height계산할 자식의 기본 높이가 없으므로에 max-height계산 none하여 자식의 키를 최대한 크게 할 수 있습니다. 현재 자식에 작용하는 다른 제약 조건 max-width은 부모의 제약 이며 이미지 자체가 너비보다 키가 크므로 전체적으로 가능한 한 가로 세로 비율을 유지하기 위해 컨테이너 높이가 아래쪽으로 넘칩니다.

이 때 할 부모에 대한 명시적인 높이를 지정한 다음 아이는 그 명시적인 높이의 대부분 100 %이어야한다 알고있다. 그래야 부모의 키로 제한 될 수 있습니다 (여전히 가로 세로 비율을 유지하면서).

— BoltClock
소스

4

이것은 내 친구의 입력과 함께 유용한 설명입니다 : "max-height : 100 % (자식) max-height : 100 % (부모) = 0-이것이 자녀가 부모의 가치를 존중하지 않는 이유입니다".

— iamkeir

8

어떤 답변을 수락해야할지 모르겠습니다.이 답변은 '이유'에 대한 답변입니다.

— iamkeir

명시 적으로 언급되지 않은 목표가 무엇인지 확실하지 않기 때문에 '왜'에 대해서만 대답했습니다. 어쩌면 당신이 그것에 대해 자세히 설명하면 대답 할 수 있습니다.

— BoltClock

내 실제 질문에 대한 답변으로 받아 들였습니다. 감사합니다. 아래 @Daniel의 답변은 수정 사항을 제공합니다.

— iamkeir

내 경우 display: flex; flex-direction: column에는 문제를 해결하고 원하는 스크롤 막대를 추가했습니다.

— xdevs23

73

코드 스 니펫 표시

.container {
  background: blue;
  padding: 10px;
  max-height: 200px;
  max-width: 200px;
  float: left;
  margin-right: 20px;
}

.img1 {
  display: block;
  max-height: 100%;
  max-width: 100%;
}

.img2 {
  display: block;
  max-height: inherit;
  max-width: inherit;
}

<!-- example 1  -->
<div class="container">
  <img class='img1' src="http://via.placeholder.com/350x450" />
</div>

<!-- example 2  -->

<div class="container">
  <img class='img2' src="http://via.placeholder.com/350x450" />
</div>

스 니펫 확장

나는 조금 놀았다. firefox의 더 큰 이미지에서 inherit 속성 값을 사용하면 좋은 결과를 얻었습니다. 이것이 당신을 도울 것입니까?

.container {
    background: blue;
    padding: 10px;
    max-height: 100px;
    max-width: 100px;
    text-align:center;
}

img {
    max-height: inherit;
    max-width: inherit;
}

— 다니엘
소스

어떤 대답을 수락 해야할지 모르겠습니다.이 답변은 '수정'입니다.

— iamkeir

이유에 대한 답변으로 @BoltClock을 수락했지만 해결 방법을 제공해 주셔서 감사합니다.

— iamkeir

1

@BoltClock 외에도 내 대답은 그가 말하는 것을 정확하게하고 있습니다. CSS는 컴퓨터에 요소를 처리하는 방법을 알려주고 있지만 계산 후에는 모든 값을 높이, 너비, 색상, 좌표 등 렌더링에 필요한 기본 값으로 구분합니다. inherit 속성은 img에게 부모의 "계산 된"값을 취하십시오. 따라서 max-height 및 max-width css 속성에서 높이와 너비에 대한 계산 된 값을 얻습니다.

— Daniel

2

max:height: 100%고정 높이 대신에 작동하지 않습니다 : jsfiddle.net/umbreak/n6czk9xt/1

— Didac Montero

2

레이아웃이 반응하는 고정 된 원인으로 너비와 높이를 선언 할 수 없습니다 dispaly: flex;. 새 스레드를 열었습니다. 새 스레드를 열었습니다. stackoverflow.com/questions/29732391/… 그러나 더 나쁜 경우에는 Jquery를 사용하여 img 실제 너비와 높이를 가져 와서 부모 이미지의 div에 설정할 수 있습니다.

— Didac Montero

7

여기에서 해결책을 찾았습니다 : http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

트릭은 요소의 WIDTH와 PADDING-BOTTOM 사이에 관계가 있기 때문에 가능합니다. 그래서:

부모의:

container {
  height: 0;
  padding-bottom: 66%; /* for a 4:3 container size */
  }

child ( width와 관련된 모든 CSS를 제거하십시오 ( 즉, width : 100 %) :

img {
  max-height: 100%;
  max-width: 100%;
  position: absolute;     
  display:block;
  margin:0 auto; /* center */
  left:0;        /* center */
  right:0;       /* center */
  }

— 니 엔테 1
소스

5

속성 object-fit을 사용할 수 있습니다

.cover {
    object-fit: cover;
    width: 150px;
    height: 100px;
}

여기에 제안 된대로

Dev.Opera의 Chris Mills 가이 속성 에 대한 전체 설명

그리고 더 나은 하나의 CSS-트릭에

그것은 지원됩니다

크롬 31+
사파리 7.1+
Firefox 36 이상
오페라 26+
안드로이드 4.4.4 이상
iOS 8 이상

방금 vivaldi와 크롬이 그것을 지원하는지 확인했습니다 (여기서 놀랍지 않습니다).

현재 IE에서는 지원되지 않지만 누가 신경 쓰 나요? 또한 iOS는 객체 맞춤을 지원하지만 객체 위치는 지원하지 않지만 곧 지원 될 것입니다.

— 루이스 시에라
소스

좋은 대안! IE의 정상적인 성능 저하가 허용되는 경우 flex-box가 잠재적으로 도움을 줄 수 있다고 생각합니다.

— iamkeir

3

최근 에이 질문 의 복제본으로 표시된 질문에 대한 솔루션 이 있습니다. <img>태그는 부모의 최대 높이를 초과했다 <div>.

깨진 : 바이올린

일 : 바이올린

이 경우 display:flex두 개의 상위 <div>태그에 추가하면 답이됩니다

— 크레이지 페이스트
소스

3

최대 높이 : 100 % / 100 % 대신 모든 공간을 채우는 다른 방법으로 position: absolute top / bottom / left / right를 0으로 설정 하는 입니다.

다시 말해 HTML은 다음과 같습니다.

<div class="flex-content">
  <div class="scrollable-content-wrapper">
    <div class="scrollable-content">
      1, 2, 3
    </div>
   </div>
</div>

.flex-content {
  flex-grow: 1;
  position: relative;
  width: 100%;
  height: 100%;
}

.scrollable-content-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.scrollable-content {
}

코드 및 상자-CSS Flex / Grid의 오버플로 에서 실제 예제를 볼 수 있습니다.

— 톈전 린
소스

2

다른 사람이 문제의 원인을 설명 할 수는 있지만 컨테이너의 높이를 지정한 다음 이미지의 높이를 100 %로 설정하여 해결할 수 있습니다. 하는 것이 중요합니다 width이미지가 이전에 나타납니다 height.

<html>
    <head>
        <style>
            .container {  
                background: blue; 
                padding: 10px;
                height: 100%;
                max-height: 200px; 
                max-width: 300px; 
            }

            .container img {
                width: 100%;
                height: 100%
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="http://placekitten.com/400/500" />
        </div>
    </body>
</html>

— 케빈 브라이던
소스

이미지가 200x200보다 작 으면 컨테이너가 더 작아지기를 원한다면 최소 높이 / 최대 높이로 수행해야합니다.

— cimmanon

2

내가 얻을 수있는 가장 가까운 것은 다음 예입니다.

http://jsfiddle.net/YRFJQ/1/

또는

.container {  
  background: blue; 
  border: 10px solid blue; 
  max-height: 200px; 
  max-width: 200px; 
  overflow:hidden;
  box-sizing:border-box;
}

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

가장 큰 문제는 높이가 컨테이너 높이의 백분율을 취한다는 것입니다. 따라서 최대 높이가 아니라 부모 컨테이너에서 명시 적으로 설정된 높이를 찾고 있습니다.

이것을 볼 수있는 유일한 방법은 오버플로를 숨길 수있는 위의 바이올린이지만 패딩은 여전히 이미지가 유입되는 가시적 공간으로 작용하므로 대신 단색 테두리로 대체하면 작동합니다 (그리고 너비가 필요한 경우 테두리 상자를 추가하여 200px로 만듭니다.)

이것이 당신이 필요로하는 것에 맞는지 확실하지 않지만, 내가 얻을 수있는 최선의 방법입니다.

— 애슐리 놀란
소스

불행히도 이미지 자르기는 이상적이지 않습니다. 귀하의 의견에 감사드립니다.

— iamkeir

1

좋은 해결책은 부모에게 높이를 사용하지 않고 View Port가 있는 자식에서만 사용하는 것입니다 .

바이올린 예 : https://jsfiddle.net/voan3v13/1/

body, html {
  width: 100%;
  height: 100%;
}
.parent {
  width: 400px;
  background: green;
}

.child {
  max-height: 40vh;
  background: blue;
  overflow-y: scroll;
}

— 티 부스
소스

1

컨테이너는 일반적으로 이미 내용을 멋지게 포장합니다. 아이들은 조상을 훌륭하게 채우지 않습니다. 따라서 가장 바깥 쪽 요소가 아닌 맨 안쪽 요소에 너비 / 높이 값을 설정하고 바깥 쪽 요소가 내용을 감싸도록하십시오.

.container {
    background: blue;
    padding: 10px;
}

img {
    display: block;
    max-height: 200px;
    max-width: 200px;
}

— 데이브 쿠 시노
소스

좋은데, 나 이거 좋아.

— iamkeir

0

컨테이너 높이가 없습니다.

높이 추가 : 200px;

컨테이너 CSS에 키티는 내부에 남아있을 것입니다.

— 라파엘
소스

의견을 보내 주셔서 감사하지만 OP에서 이것을 확인했습니다.

— iamkeir