保持flexbox中包含图像的div的长宽比

时间：2019-03-22 20:47:03

标签： html css css3 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

理想结果：

enter image description here

1 个答案:

答案 0 :(得分：1)

哇，我终于设法了解了所解释的内容in this article。 现在，容器会随着内部的弹性项目调整大小，同时保持宽高比。

最后的技巧是在包含作为“高度”的图像的div上设置padding-top: 30%，然后将其赋予position: relative。这使我能够给孩子（现在被填充顶部向下推）position: absolute并将其放在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>

相关问题
最新问题