เด็กที่มีความสูงสูงสุด: ผู้ปกครองล้น 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>

ฉันเล่นรอบเล็กน้อย ในภาพขนาดใหญ่ใน firefox ฉันได้รับผลลัพธ์ที่ดีจากการใช้ค่าคุณสมบัติที่สืบทอดมา สิ่งนี้จะช่วยคุณได้หรือไม่?

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

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

ฉันพบวิธีแก้ปัญหาที่นี่: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

เคล็ดลับนี้เป็นไปได้เนื่องจากมีความสัมพันธ์ระหว่าง WIDTH และ PADDING-BOTTOM ขององค์ประกอบ ดังนั้น:

ผู้ปกครอง:

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

child ( ลบ css ทั้งหมดที่เกี่ยวข้องกับ widthเช่น width: 100%):

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

คุณสามารถใช้คุณสมบัติobject-fit

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

ชอบแนะนำที่นี่

คำอธิบายทั้งหมดของคุณสมบัตินี้โดย Chris Mills ใน Dev.Opera

และสิ่งที่ดีกว่าใน CSS-Tricks

ได้รับการสนับสนุนใน

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

ฉันเพิ่งตรวจสอบว่า vivaldi และโครเมียมรองรับเช่นกัน (ไม่แปลกใจที่นี่)

ขณะนี้ยังไม่รองรับ IE แต่ ... ใครจะสนล่ะ? นอกจากนี้ iOS ยังรองรับ object-fit แต่ไม่ใช่ object-position แต่จะเร็ว ๆ นี้

นี่คือวิธีแก้ปัญหาสำหรับคำถามที่เพิ่งเปิดเมื่อเร็ว ๆ นี้ซึ่งทำเครื่องหมายว่าซ้ำกับคำถามนี้ แท็กเกินสูงสุดความสูงของแม่<img><div>

หัก: ซอ

การทำงาน: Fiddle

ในกรณีนี้การเพิ่มแท็กdisplay:flexหลัก 2 <div>แท็กคือคำตอบ

แทนที่จะใช้ความสูงสูงสุด: 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 {
}

คุณสามารถดูตัวอย่างสดได้ที่Codesandbox - Overflow ภายใน CSS Flex / Grid

อาจมีคนอื่นอธิบายสาเหตุที่อยู่เบื้องหลังปัญหาของคุณได้ แต่คุณสามารถแก้ปัญหาได้โดยระบุความสูงของคอนเทนเนอร์จากนั้นตั้งค่าความสูงของรูปภาพเป็น 100% มันเป็นสิ่งสำคัญที่ของภาพที่ปรากฏขึ้นก่อนwidthheight

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

สิ่งที่ใกล้เคียงที่สุดที่ฉันสามารถทำได้คือตัวอย่างนี้:

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

หรือ

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

ปัญหาหลักคือความสูงจะใช้เปอร์เซ็นต์ของความสูงของคอนเทนเนอร์ดังนั้นจึงต้องมองหาความสูงที่กำหนดไว้อย่างชัดเจนในคอนเทนเนอร์หลักไม่ใช่ความสูงสูงสุด

วิธีเดียวที่ฉันสามารถมองเห็นสิ่งนี้ได้คือซอด้านบนซึ่งคุณสามารถซ่อนส่วนที่ล้นออกมาได้ แต่ช่องว่างภายในยังคงทำหน้าที่เป็นช่องว่างที่มองเห็นได้เพื่อให้ภาพไหลเข้ามาดังนั้นการแทนที่ด้วยเส้นขอบทึบจะใช้งานได้แทน (แล้ว เพิ่ม border-box เพื่อให้เป็น 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>

ภาชนะของคุณไม่มีความสูง

เพิ่มความสูง: 200px;

ไปที่คอนเทนเนอร์ css แล้วคิตตี้จะอยู่ข้างใน