Anak dengan ketinggian maksimal: 100% induk meluap

Saya mencoba memahami apa yang tampaknya merupakan perilaku tak terduga bagi saya:

Saya memiliki elemen dengan ketinggian maksimal 100% di dalam wadah yang juga menggunakan ketinggian maksimum tetapi, tanpa diduga, anak meluap induk:

Test case: 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%; 
}

Ini diperbaiki, bagaimanapun, jika orang tua diberikan ketinggian eksplisit:

Test case: http://jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

Apakah ada yang tahu mengapa anak tidak akan menghormati tinggi maksimal orang tuanya pada contoh pertama? Mengapa diperlukan ketinggian yang eksplisit?

Ketika Anda menentukan persentase untuk max-heightpada anak, itu adalah persentase dari tinggi sebenarnya orang tua, bukan orang tua max-height, cukup aneh . Hal yang sama berlaku untuk max-width.

Jadi, ketika Anda tidak menentukan ketinggian eksplisit pada orang tua, maka tidak ada tinggi dasar untuk anak max-heightdihitung, jadi hitung max-heightsampai none, memungkinkan anak setinggi mungkin. Satu-satunya kendala lain yang berlaku pada anak sekarang adalah max-widthdari orang tuanya, dan karena gambar itu sendiri lebih tinggi daripada lebar, itu meluap tinggi wadah ke bawah, untuk mempertahankan rasio aspeknya sementara masih sebesar mungkin secara keseluruhan.

Ketika Anda melakukan menentukan ketinggian eksplisit untuk orang tua, maka anak tahu itu harus paling banyak 100% dari yang tinggi eksplisit. Itu memungkinkannya dibatasi oleh ketinggian induknya (sambil tetap mempertahankan rasio aspeknya).

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

Saya bermain-main sedikit. Pada gambar yang lebih besar di firefox, saya mendapat hasil yang baik dengan menggunakan nilai properti inherit. Apakah ini akan membantu Anda?

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

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

Saya menemukan solusi di sini: http://www.sitepoint.com/maintain-image-aspect-ratios-responsif-web-design/

Trik ini dimungkinkan karena ada hubungan antara WIDTH dan PADDING-BOTTOM dari suatu elemen. Begitu:

induk:

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

child ( hapus semua css yang terkait dengan lebar , yaitu lebar: 100%):

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

Anda dapat menggunakan properti -fit objek

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

Seperti yang disarankan di sini

Penjelasan lengkap tentang properti ini oleh Chris Mills di Dev.Opera

Dan yang lebih baik lagi di CSS-Trik

Ini didukung di

• Chrome 31+
• Safari 7.1+
• Firefox 36+
• Opera 26+
• Android 4.4.4+
• iOS 8+

Saya baru saja memeriksa bahwa vivaldi dan chromium mendukungnya juga (tidak mengherankan di sini)

Saat ini tidak didukung di IE, tapi ... siapa yang peduli ? Juga, iOS mendukung objek-fit, tetapi bukan posisi-objek, tetapi akan segera.

Berikut adalah solusi untuk pertanyaan yang baru saja dibuka dan ditandai sebagai duplikat dari pertanyaan ini . The <img>tag telah melebihi max-height dari orang tua <div>.

Rusak: Biola

Bekerja: Fiddle

Dalam hal ini, menambahkan display:flexke <div>tag 2 induk adalah jawabannya

Alih-alih menggunakan max-height: 100% / 100%, pendekatan alternatif untuk mengisi semua ruang akan digunakan position: absolute set atas / bawah / kiri / kanan ke 0.

Dengan kata lain, HTML akan terlihat seperti berikut:

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

Anda dapat melihat contoh langsung di Codesandbox - Overflow dalam CSS Flex / Grid

Mungkin orang lain dapat menjelaskan alasan di balik masalah Anda, tetapi Anda dapat menyelesaikannya dengan menentukan ketinggian wadah dan kemudian mengatur tinggi gambar menjadi 100%. Adalah penting bahwa widthgambar muncul sebelum 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>

Contoh terdekat yang bisa saya dapatkan adalah contoh ini:

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

atau

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

Masalah utama adalah bahwa ketinggian mengambil persentase dari tinggi wadah, sehingga mencari ketinggian yang ditetapkan secara eksplisit dalam wadah induk, bukan max-height.

Satu-satunya cara memutari ini sampai batas tertentu yang bisa saya lihat adalah biola di atas di mana Anda dapat menyembunyikan overflow, tapi kemudian padding masih bertindak sebagai ruang yang terlihat untuk gambar mengalir, dan sebagai gantinya menggantikan dengan karya perbatasan yang solid sebagai gantinya (dan kemudian menambahkan kotak batas untuk membuatnya 200px jika itu lebar yang Anda butuhkan)

Tidak yakin apakah ini cocok dengan apa yang Anda butuhkan, tetapi yang terbaik yang bisa saya dapatkan.

Solusi yang baik adalah tidak menggunakan ketinggian pada orang tua dan menggunakannya hanya pada anak dengan View Port :

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

Kontainer umumnya sudah akan membungkus konten mereka dengan baik. Itu sering tidak bekerja dengan baik sebaliknya: anak-anak tidak memenuhi leluhur mereka dengan baik. Jadi, atur nilai lebar / tinggi Anda pada elemen paling dalam daripada elemen terluar, dan biarkan elemen luar membungkus isinya.

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

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

Wadah Anda tidak memiliki ketinggian.

Tambahkan tinggi: 200px;

ke wadah css dan anak kucing akan tetap di dalam.