최대 신장이있는 어린이 : 부모를 100 % 오버플로
예상치 못한 행동으로 보이는 것이 무엇인지 이해하려고합니다.
컨테이너 안에 최대 높이가 100 % 인 요소가 있으며 최대 높이를 사용하지만 예기치 않게 자식이 부모를 오버플로합니다.
테스트 사례 : http://jsfiddle.net/bq4Wu/16/
.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>I played around a little. On a larger image in firefox, I got a good result with using the inherit property value. Will this help you?
.container {
background: blue;
padding: 10px;
max-height: 100px;
max-width: 100px;
text-align:center;
}
img {
max-height: inherit;
max-width: inherit;
}
I found a solution here: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
The trick is possible because it exists a relation between WIDTH and PADDING-BOTTOM of an element. So:
parent:
container {
height: 0;
padding-bottom: 66%; /* for a 4:3 container size */
}
child (remove all css related to width, i.e. width:100%):
img {
max-height: 100%;
max-width: 100%;
position: absolute;
display:block;
margin:0 auto; /* center */
left:0; /* center */
right:0; /* center */
}
Maybe someone else can explain the reasons behind your problem but you can solve it by specifying the height of the container and then setting the height of the image to be 100%. It is important that the width of the image appears before the 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>
The closest I can get to this is this example:
or
.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%;
}
The main problem is that the height takes the percentage of the containers height, so it is looking for an explicitly set height in the parent container, not it's max-height.
The only way round this to some extent I can see is the fiddle above where you can hide the overflow, but then the padding still acts as visible space for the image to flow into, and so replacing with a solid border works instead (and then adding border-box to make it 200px if that's the width you need)
Not sure if this would fit with what you need it for, but the best I can seem to get to.
You can use the property object-fit
.cover {
object-fit: cover;
width: 150px;
height: 100px;
}
Like suggested here
A full explanation of this property by Chris Mills in Dev.Opera
And an even better one in CSS-Tricks
It's supported in
- Chrome 31+
- Safari 7.1+
- Firefox 36+
- Opera 26+
- Android 4.4.4+
- iOS 8+
I just checked that vivaldi and chromium support it as well (no surprise here)
It's currently not supported on IE, but... who cares ? Also, iOS supports object-fit, but not object-position, but it will soon.
Here is a solution for a recently opened question marked as a duplicate of this question. The <img> tag was exceeding the max-height of the parent <div>.
Broken: Fiddle
Working: Fiddle
In this case, adding display:flex to the 2 parent <div> tags was the answer
A good solution is to not use height on the parent and use it just on the child with View Port :
Fiddle Example: 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;
}
Your container does not have a height.
Add height: 200px;
to the containers css and the kitty will stay inside.
참고URL : https://stackoverflow.com/questions/14262938/child-with-max-height-100-overflows-parent
'Programing' 카테고리의 다른 글
| ProgressBar / ProgressDialog에 대한 사용자 정의 드로어 블 (0) | 2020.07.11 |
|---|---|
| SVN 405 방법이 허용되지 않습니다 (0) | 2020.07.11 |
| Windows에서 박쥐 파일을 사용하여 모든 내용이 들어있는 폴더를 삭제하는 방법은 무엇입니까? (0) | 2020.07.11 |
| Google App Engine에서 모든 데이터 스토어를 삭제하는 방법은 무엇입니까? (0) | 2020.07.11 |
| PHP에서 대문자 부울 대 소문자 (0) | 2020.07.11 |