时间戳

首页 > 解决方案 > 在 flexbox 中保持包含图像的 div 的纵横比

html - 在 flexbox 中保持包含图像的 div 的纵横比

问题描述

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

但是，图像可以是任何纵横比，我必须将它们限制为 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

理想的结果：

在此处输入图像描述

标签： htmlcssflexbox

解决方案

哇，我终于理解了这篇文章所解释的内容。容器现在随着内部的弹性项目一起调整大小，同时保持纵横比。

最后的诀窍是在padding-top: 30%包含充当“高度”的图像的 div 上设置 a，然后给它们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>

推荐阅读