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

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

컨테이너 안에 최대 높이가 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;
}

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

답변

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

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

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

답변

코드 스 니펫 표시

.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;
}

답변

여기에서 해결책을 찾았습니다 :
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 */
  }

답변

속성 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는 객체 맞춤을 지원하지만 객체 위치는 지원하지 않지만 곧 지원 될 것입니다.

답변

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

깨진 : 바이올린

일 : 바이올린

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

답변

최대 높이 : 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의 오버플로 에서 실제 예제를 볼 수 있습니다.

답변

다른 사람이 문제의 원인을 설명 할 수는 있지만 컨테이너의 높이를 지정한 다음 이미지의 높이를 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>