최대 높이의 자식: 100%가 상위 항목으로 넘칩니다.
저는 제게 예상치 못한 행동으로 보이는 것을 이해하려고 노력하고 있습니다.
컨테이너 내부에 최대 높이가 100%인 요소가 있는데, 이 요소도 최대 높이를 사용하지만 예기치 않게 자식 요소가 상위 항목을 오버플로합니다.
.container {
background: blue;
padding: 10px;
max-height: 200px;
max-width: 200px;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
}<div class="container">
<img src="http://placekitten.com/400/500" />
</div>그러나 상위 항목에 명시적인 높이가 지정된 경우 이는 고정됩니다.
.container {
background: blue;
padding: 10px;
max-height: 200px;
max-width: 200px;
height: 200px;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
}<div class="container">
<img src="http://placekitten.com/400/500" />
</div>아이가 첫 번째 예에서 부모의 최대 키를 존중하지 않는 이유를 아는 사람이 있습니까?명시적인 높이가 필요한 이유는 무엇입니까?
다음에 대한 백분율을 지정하는 경우max-height어린이의 경우, 부모의 실제 키의 백분율이지 부모의 키가 아닙니다.max-height기묘하게도마찬가지로 에도 적용됩니다.
따라서 상위 항목에 명시적인 높이를 지정하지 않으면 하위 항목에 대한 기본 높이가 없습니다.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>저는 조금 놀았습니다.파이어폭스의 큰 이미지에서 상속 속성 값을 사용하여 좋은 결과를 얻었습니다.이것이 당신에게 도움이 될까요?
.container {
background: blue;
padding: 10px;
max-height: 100px;
max-width: 100px;
text-align:center;
}
img {
max-height: inherit;
max-width: inherit;
}
최대 높이: 100%/100%를 사용하는 대신 모든 공간을 채우는 대안적인 접근 방식이 사용될 것입니다.position: absolute위쪽/아래쪽/왼쪽/오른쪽을 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 {
/* Add styling here */
}
아래에서 사용해 보십시오.
.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;
}
html {
height: 50%;
width: 50%;
}
body {
height: 100%;
width: 100%;
}
.parent {
height: 100%;
outline: 1px solid red;
}<html>
<body>
<div class="parent">
<div class="flex-content">
<div class="scrollable-content-wrapper">
<div class="scrollable-content" id="scrollable">
1, 2, 3
</div>
</div>
</div>
</div>
<button onClick="scrollable.innerText += '\nSome more text'" style="margin-top: 1rem;">Add Line</button>
<p>
The red outline represents the parent. Click above to add a line until overflow occurs to see that the size of the parent is not increased.
</p>
</body>
</html>여기서 해결책을 찾았습니다. http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
요소의 너비와 패딩-바닥 사이에 관계가 있기 때문에 트릭이 가능합니다.그래서:
상위:
container {
height: 0;
padding-bottom: 66%; /* for a 4:3 container size */
}
child(폭과 관련된 모든 CSS 제거, 즉 폭:100%):
img {
max-height: 100%;
max-width: 100%;
position: absolute;
display:block;
margin:0 auto; /* center */
left:0; /* center */
right:0; /* center */
}
객체 적합 특성을 사용할 수 있습니다.
.cover {
object-fit: cover;
width: 150px;
height: 100px;
}
여기에 제안된 것처럼
Dev.Opera에서 Chris Mills에 의한 이 속성에 대한 완전한 설명.
에서 지원됩니다.
- 크롬 31+
- Safari 7.1+
- 파이어폭스 36+
- 오페라 26+
- 안드로이드 4.4.4+
- iOS 8+
방금 비발디와 크롬도 지원한다는 것을 확인했습니다(놀랍지 않습니다).
현재 IE에서는 지원되지 않지만...누가 신경써요?또한 iOS는 객체 맞춤은 지원하지만 객체 위치는 지원하지 않지만 곧 지원할 것입니다.
다음은 이 질문의 중복으로 표시된 최근에 열린 질문에 대한 해결책입니다.<img>의 최대 를 초과했습니다.<div>.
깨짐: 피들
작업:피들
이경, 추가를 합니다.display:flex 부모에게<div>이었습니다.
다른 사람이 문제의 원인을 설명할 수 있지만 용기 높이를 지정한 다음 이미지 높이를 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>
가장 가까운 예는 다음과 같습니다.
또는
.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로 만듭니다).
이것이 당신이 필요로 하는 것에 맞는지는 모르겠지만, 제가 할 수 있는 최선의 방법입니다.
좋은 해결책은 부모에서 높이를 사용하지 않고 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;
}
컨테이너는 이미 일반적으로 내용물을 잘 포장합니다.그것은 종종 반대로 잘 작동하지 않습니다: 아이들은 그들의 조상을 잘 채우지 못합니다.따라서 가장 바깥쪽 요소가 아닌 가장 안쪽 요소에 너비/높이 값을 설정하고 바깥쪽 요소가 내용물을 감싸도록 합니다.
.container {
background: blue;
padding: 10px;
}
img {
display: block;
max-height: 200px;
max-width: 200px;
}
http://jsfiddle.net/mpalpha/71Lhcb5q/
.container {
display: flex;
background: blue;
padding: 10px;
max-height: 200px;
max-width: 200px;
}
img {
object-fit: contain;
max-height: 100%;
max-width: 100%;
}<div class="container">
<img src="http://placekitten.com/400/500" />
</div>언급URL : https://stackoverflow.com/questions/14262938/child-with-max-height-100-overflows-parent
'programing' 카테고리의 다른 글
| 애플리케이션 컨텍스트 초기화 이벤트에 후크를 추가하는 방법은 무엇입니까? (0) | 2023.08.22 |
|---|---|
| Gitflow 릴리스 분기 및 태그 - "v" 접두사 사용 여부와 상관없이 (0) | 2023.08.22 |
| 공유 기본 설정에 어레이 목록 저장 (0) | 2023.08.17 |
| 서버 이벤트 시 서버에서 클라이언트로 알림 전송 (0) | 2023.08.17 |
| okhttp3 mockserver java.dll.NoClassDefFoundError: okhttp3/내부/동시/TaskRunner$RealBackend (0) | 2023.08.17 |