Maksimum yüksekliğe sahip çocuk:% 100 taşan ebeveyn

Bana beklenmedik bir davranış gibi görünen şeyleri anlamaya çalışıyorum:

Ben de maksimum yüksekliği kullanan bir kapsayıcı içinde% 100 maksimum yüksekliğe sahip bir öğe var, ancak beklenmedik bir şekilde, çocuk üst taşan:

Test örneği: 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%; 
}

Ancak, üst öğeye açık bir yükseklik verilirse bu sorun giderilir:

Test örneği: http://jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

Çocuğun ilk örnekte neden ebeveyninin maksimum yüksekliğini onurlandırmayacağını bilen var mı? Neden açık bir yükseklik gerekli?

Bir max-heightçocuk için bir yüzde belirttiğinizde , ebeveynin değil, ebeveynin gerçek yüksekliğinin yüzdesidir max-height, garip bir şekilde . Aynı şey için de geçerlidir max-width.

Yani, ebeveyn üzerinde açık bir yükseklik belirlediğinizde, ardından çocuk için hiçbir taban yüksekliği var orada max-heightyüzden gelen hesaplanacak max-heightHesaplamalar için noneçocuk mümkün olduğunca uzun boylu olarak olmamı sağlayan. Şu anda çocuğa etki eden diğer tek kısıt max-widthebeveynin kendisidir ve görüntünün kendisi genişliğinden daha uzun olduğundan, genel olarak mümkün olduğu kadar büyükken en-boy oranını korumak için kabın yüksekliğini aşağı doğru taşar.

Ne zaman yapmak ebeveyn için açık bir yüksekliği belirtin sonra çocuk o açık yüksekliğinin en% 100 olması gerektiğini biliyor. Bu, ebeveynin yüksekliğiyle sınırlandırılmasını sağlar (yine de en boy oranını korurken).

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

Biraz oynadım. Firefox'ta daha büyük bir görüntüde, devralma özelliği değerini kullanarak iyi bir sonuç elde ettim. Bu size yardımcı olacak mı?

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

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

Burada bir çözüm buldum: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

Hile mümkündür çünkü bir elemanın GENİŞLİĞİ ve PADDING-BOTTOM'u arasında bir ilişki vardır. Yani:

ebeveyn:

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

çocuk ( genişlikle ilgili tüm css'leri kaldırın , yani genişlik:% 100):

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

Object-fit özelliğini kullanabilirsiniz

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

Burada önerildiği gibi

Dev.Opera'daki Chris Mills tarafından bu tesisin tam açıklaması

Ve CSS-Tricks'te daha da iyi

İçinde desteklenir

• Chrome 31+
• Safari 7.1 ve üzeri
• Firefox 36+
• Opera 26+
• Android 4.4.4 ve üstü
• iOS 8+

Vivaldi ve kromun da desteklediğini kontrol ettim (burada sürpriz yok)

Şu anda IE'de desteklenmiyor, ama ... kimin umurunda ? Ayrıca, iOS nesneye uymayı destekler, ancak nesne konumunu desteklemez, ancak yakında desteklenecektir.

İşte yakın zamanda açılmış bir sorunun bu sorunun kopyası olarak işaretlenmiş bir çözümü . <img>Etiket ebeveynin max-height aşan edildi <div>.

Kırık: Keman

Çalışıyor: Keman

Bu durumda, display:flex2 üst <div>etikete eklemek yanıttı

Maksimum yükseklikle gitmek yerine:% 100 /% 100, tüm alanı doldurmak için alternatif bir yaklaşım, position: absoluteüst / alt / sol / sağ 0 olarak ayarlandığında kullanılır.

Başka bir deyişle, HTML aşağıdaki gibi görünecektir:

<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 içinde Codesandbox - Overflow'da canlı bir örnek görebilirsiniz

Belki başka biri probleminizin arkasındaki nedenleri açıklayabilir, ancak kabın yüksekliğini belirterek ve sonra görüntünün yüksekliğini% 100 olarak ayarlayarak çözebilirsiniz. widthGörüntünün simgesinden önce görünmesi önemlidir 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>

Buna en yakın ben bu örnek:

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

veya

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

Ana sorun, yüksekliğin kap yüksekliğinin yüzdesini almasıdır, bu nedenle üst kapta açıkça ayarlanmış bir yükseklik arar, maksimum yükseklik değildir.

Bunu bir dereceye kadar görebildiğim tek yol, taşmayı gizleyebileceğiniz yukarıdaki kemandır, ancak daha sonra dolgu, görüntünün akması için hala görünür alan görevi görür ve bu nedenle bunun yerine katı bir kenarlıkla değiştirmek çalışır (ve sonra İhtiyacınız olan genişlik ise 200 piksel yapmak için kenarlık kutusu ekleyerek)

Bu sizin için ne gerek uygun olup olmadığını emin değilim, ama en iyi almak için görünebilir.

İyi bir çözüm ebeveyn üzerinde yükseklik kullanmamak ve sadece View Port'lu çocukta kullanmaktır :

Keman Örneği: 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;
}

Kapsayıcılar zaten içeriklerini genel olarak güzelce sararlar. Genellikle tam tersi işe yaramaz: çocuklar atalarını iyi doldurmazlar. Bu nedenle, genişlik / yükseklik değerlerinizi en dış öğeden ziyade en iç öğede ayarlayın ve dış öğelerin içeriklerini sarmasına izin verin.

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

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

Konteynerinizin yüksekliği yok.

Yükseklik ekle: 200 piksel;

kaplar css ve kitty içinde kalacak.