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

问题描述 投票：2回答：1

我有一些图像分为两行，宽度随着浏览器窗口的大小调整而随容器增长和缩小。

但是，图像可以是任何宽高比，我必须将它们约束到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>

codesandbox：https://codesandbox.io/s/8x3qjompz9

理想的结果：

enter image description here

html css css3 flexbox
1个回答
1
投票

哇，我终于设法理解了什么被解释in this article。容器现在调整大小，其中flex-items内部调整大小，同时保持纵横比。

最后的诀窍是在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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.