Con có chiều cao tối đa: 100% tràn cha mẹ

Tôi đang cố gắng hiểu những gì dường như là hành vi bất ngờ đối với tôi:

Tôi có một yếu tố với chiều cao tối đa 100% bên trong một thùng chứa cũng sử dụng chiều cao tối đa, nhưng thật bất ngờ, đứa trẻ lại tràn ra cha mẹ:

Trường hợp thử nghiệm: 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%; 
}

Điều này là cố định, tuy nhiên, nếu cha mẹ được cho một chiều cao rõ ràng:

Trường hợp thử nghiệm: http://jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

Có ai biết tại sao đứa trẻ sẽ không tôn vinh chiều cao tối đa của cha mẹ trong ví dụ đầu tiên không? Tại sao cần phải có chiều cao rõ ràng?

Khi bạn chỉ định tỷ lệ phần trăm cho max-heightmột đứa trẻ, nó là một tỷ lệ phần trăm chiều cao thực tế của cha mẹ, không phải là của cha mẹ max-height, đủ kỳ lạ . Áp dụng tương tự cho max-width.

Vì vậy, khi bạn không chỉ định chiều cao rõ ràng cho cha mẹ, thì sẽ không tính chiều cao cơ sở cho trẻ max-height, vì vậy hãy max-heighttính toán none, cho phép trẻ cao nhất có thể. Hạn chế duy nhất khác tác động lên đứa trẻ bây giờ là max-widthcha mẹ của nó, và vì hình ảnh của nó cao hơn chiều rộng, nó vượt quá chiều cao của ngăn chứa xuống, để duy trì tỷ lệ khung hình của nó trong khi vẫn lớn nhất có thể.

Khi bạn làm chỉ định một chiều cao rõ ràng cho phụ huynh, thì đứa trẻ có biết là cần tối đa là 100% so với chiều cao rõ ràng. Điều đó cho phép nó bị giới hạn về chiều cao của cha mẹ (trong khi vẫn duy trì tỷ lệ khung hình của nó).

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

Tôi chơi xung quanh một chút. Trên một hình ảnh lớn hơn trong firefox, tôi đã có một kết quả tốt với việc sử dụng giá trị thuộc tính kế thừa. Điều này sẽ giúp bạn?

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

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

Tôi tìm thấy một giải pháp ở đây: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

Thủ thuật này là có thể bởi vì nó tồn tại một mối quan hệ giữa WIDTH và PADDING-BOTTOM của một yếu tố. Vì thế:

cha mẹ:

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

con ( xóa tất cả css liên quan đến chiều rộng , tức là chiều rộng: 100%):

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

Bạn có thể sử dụng thuộc tính phù hợp với đối tượng

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

Giống như đề xuất ở đây

Một lời giải thích đầy đủ về tài sản này của Chris Mills trong Dev.Opera

Và thậm chí còn tốt hơn trong CSS-Tricks

Nó được hỗ trợ trong

• Chrome 31+
• Safari 7.1+
• Firefox 36+
• Opera 26+
• Android 4.4.4 trở lên
• iOS 8+

Tôi chỉ kiểm tra rằng vivaldi và crom cũng hỗ trợ nó (không có gì ngạc nhiên ở đây)

Hiện tại nó không được hỗ trợ trên IE, nhưng ... ai quan tâm ? Ngoài ra, iOS hỗ trợ đối tượng phù hợp, nhưng không phải vị trí đối tượng, nhưng nó sẽ sớm ra mắt.

Đây là một giải pháp cho một câu hỏi mở gần đây được đánh dấu là một bản sao của câu hỏi này . Các <img>thẻ được vượt max-height của phụ huynh <div>.

Bị hỏng: Fiddle

Làm việc: Fiddle

Trong trường hợp này, thêm display:flexvào 2 <div>thẻ cha là câu trả lời

Thay vì sử dụng chiều cao tối đa: 100% / 100%, một cách tiếp cận khác là lấp đầy tất cả không gian sẽ được sử dụng position: absolutevới đỉnh / đáy / trái / phải được đặt thành 0.

Nói cách khác, HTML sẽ trông như sau:

<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 {
}

Bạn có thể xem ví dụ trực tiếp tại Codeandbox - Tràn trong CSS Flex / Grid

Có thể người khác có thể giải thích lý do đằng sau vấn đề của bạn nhưng bạn có thể giải quyết bằng cách chỉ định chiều cao của thùng chứa và sau đó đặt chiều cao của hình ảnh là 100%. Điều quan trọng là widthhình ảnh xuất hiện trước 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>

Gần nhất tôi có thể nhận được đây là ví dụ này:

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

hoặc là

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

Vấn đề chính là chiều cao chiếm tỷ lệ phần trăm của chiều cao của container, do đó, nó đang tìm kiếm một chiều cao được đặt rõ ràng trong vùng chứa chính, chứ không phải chiều cao tối đa.

Cách duy nhất làm tròn điều này đến một mức độ nào đó mà tôi có thể thấy là phần bên trên nơi bạn có thể ẩn phần tràn, nhưng sau đó phần đệm vẫn đóng vai trò là không gian có thể nhìn thấy để hình ảnh chảy vào, và thay vào đó bằng một đường viền chắc chắn hoạt động (và sau đó thêm hộp viền để làm cho nó 200px nếu đó là chiều rộng bạn cần)

Không chắc chắn nếu điều này sẽ phù hợp với những gì bạn cần nó, nhưng tốt nhất tôi dường như có thể nhận được.

Một giải pháp tốt là không sử dụng chiều cao của cha mẹ và chỉ sử dụng chiều cao cho con với View Port :

Ví dụ về Fiddle: 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;
}

Các container thường sẽ bọc nội dung của chúng một cách độc đáo. Nó thường không hoạt động theo cách khác: trẻ em không lấp đầy tổ tiên của chúng một cách độc đáo. Vì vậy, hãy đặt các giá trị chiều rộng / chiều cao của bạn trên phần tử bên trong nhất chứ không phải phần tử ngoài cùng nhất và để các phần tử bên ngoài bọc nội dung của chúng.

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

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

Container của bạn không có chiều cao.

Thêm chiều cao: 200px;

đến css container và mèo con sẽ ở lại bên trong.