Maintain aspect ratio of div containing image in flexbox
Question
I have some images divided up into two rows with widths that grow and shrink with the container as the browser window is resized.
However, the images can be any aspect ratio, and I have to constrain them to an 80 width : 53 height ratio. I've been trying all sorts of things for almost a day now to no avail. How am I supposed to achieve this?
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>
The codesandbox: https://codesandbox.io/s/8x3qjompz9
The ideal result:
1 answers
solution1
1 2019-03-22 21:19:10
Wow, I have finally managed to understand what was being explained in this article . The container now resizes with the flex-items inside resizing along with it while maintaining the aspect ratio.
The trick in the end was to set a padding-top: 30% on the divs that contain the images that act as a 'height' and then giving them position: relative . This enabled me to give the child (now pushed down by the padding-top) position: absolute and put it in place at the top:0; left:0 top:0; left:0 position.
The reason I had to use padding-top instead of height is because height is calculated from the parent, when what we want is a height that is calculated from the element's width. And padding-top using percentages is calculated based on the element's width.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.