在 flexbox 中保持包含圖像的 div 的縱橫比
[英]Maintain aspect ratio of div containing image in flexbox
問題描述
我將一些圖像分成兩行，寬度隨着瀏覽器窗口的大小調整而隨着容器的變化而增大和縮小。
但是，圖像可以是任何縱橫比，我必須將它們限制為 80 寬：53 高比。 我已經嘗試了近一天的各種事情，但無濟於事。 我應該如何實現這一目標？
body { background-color: #666; display: flex; justify-content: center; } .container { background-color: white; display: flex; flex-wrap: wrap; width: 90%; } .img-box { flex-basis: 50%; } img { display: block; width: 100%; }
<!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="./src/styles.css" /> </head> <body> <div class="container"> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553174975-8b6c0a0d8fc9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553174975-8b6c0a0d8fc9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> </div> <script src="src/index.js"></script> </body> </html>
代碼和盒子： https ://codesandbox.io/s/8x3qjompz9
理想的結果：
1 個解決方案
解決方案1
1 2019-03-22 21:19:10
哇，我終於理解了這篇文章中所解釋的內容。 容器現在隨着內部的 flex-item 一起調整大小，同時保持縱橫比。
最后的訣竅是在包含充當“高度”的圖像的 div 上設置padding-top: 30%然后給它們position: relative 。 這使我能夠給孩子（現在被填充頂部推下） position: absolute並將其放在top:0; left:0 top:0; left:0位置。
我必須使用padding-top而不是height的原因是因為高度是從父級計算的，而我們想要的是從元素的寬度計算的高度。 使用百分比的padding-top是根據元素的寬度計算的。
body { background-color: #666; display: flex; justify-content: center; } .container { background-color: white; display: flex; flex-wrap: wrap; width: 90%; } .img-box { box-sizing: border-box; border: 2px solid cyan; flex-basis: 50%; padding-top: 30%; position: relative; overflow: hidden; } img { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; object-position: 50% 50%; }
<!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="./src/styles.css" /> </head> <body> <div class="container"> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553174975-8b6c0a0d8fc9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553174975-8b6c0a0d8fc9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> <div class="img-box"> <img src="https://images.unsplash.com/photo-1553155905-b94ab6f10bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjU1Nzk4fQ" /> </div> </div> <script src="src/index.js"></script> </body> </html>
在Flexbox中保持圖像寬高比
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.