如何使 div 高度始终与其宽度成比例（没有黑客）？

Question

我有一个 Flexbox div，里面有 12 张图片。我希望每个图像的 width 是那个 div 的 25%。该图像必须具有 height = 133,33% 或 width。如果图像的尺寸不等于我的 3*4，则必须缩放图像以适合我的 3*4。那么我该如何实现呢？我想我需要一个像 calc(width*4/3).

这样的工具

我的 css 和 html:

.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 100%; 
  }
  .image-grid .image-wrapper {
    width: 25%;
    height: 133.3333%; // nothing happens if I delete this line. Flexbox?
    }
  .image-grid .image {
    display: block;
    width: 100%;
    object-fit: cover; 
    }

<div class="image-grid">
    <div class="image-wrapper"><img src="assets/img/portfolio-1.jpg" alt="" class="image"></div>
    <div class="image-wrapper"><img src="assets/img/portfolio-2.jpg" alt="" class="image"></div>
    <div class="image-wrapper"><img src="assets/img/portfolio-3.jpg" alt="" class="image"></div>
    <div class="image-wrapper"><img src="assets/img/portfolio-4.jpg" alt="" class="image"></div>
    <div class="image-wrapper"><img src="assets/img/portfolio-5.jpg" alt="" class="image"></div>
    <div class="image-wrapper"><img src="assets/img/portfolio-6.jpg" alt="" class="image"></div>
    <div class="image-wrapper"><img src="assets/img/portfolio-7.jpg" alt="" class="image"></div>
    <div class="image-wrapper"><img src="assets/img/portfolio-8.jpg" alt="" class="image"></div>
    <div class="image-wrapper"><img src="assets/img/portfolio-9.jpg" alt="" class="image"></div>
    <div class="image-wrapper"><img src="assets/img/portfolio-10.jpg" alt="" class="image"></div>
    <div class="image-wrapper"><img src="assets/img/portfolio-11.jpg" alt="" class="image"></div>
    <div class="image-wrapper"><img src="assets/img/portfolio-12.jpg" alt="" class="image"></div>
</div>

我的代码非常适合 3*4 的图像，但如果图像具有其他尺寸，我会得到：

好的，找到解决方案了。只需将包装器的填充设置为 133.33% 而不是高度（并将我的 img 的位置设置为绝对位置）。这就是我所说的 "trick" 或 "hack"，但它相当清楚地解决了我的问题。此处有更多详细信息：description

Answer 1

如果容器跨越 window:

的整个宽度，这里有一个想法应该可行

将图像容器设为 25% 宽和 25vw*4/3 高（这就是您的 calc...）。同样在容器上使用 overflow: hidden 以保持固定比例。

将图像设置为 100% 高并将其宽度设置为 auto。这将使它们垂直填充容器。然后通过应用 transform: translate-x(-50%)、position: relative 和 left: 50%;.

将它们居中

这仅适用于高度小于宽度的 4/3 的图像，但据我了解，您遇到的是这种情况吗？

* {
  margin: 0;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
}

.image-grid .image-wrapper {
  flex-shrink: 1;
  flex-grow: 0;
  width: 25%;
  height: calc(25vw*4/3);
  overflow: hidden;
}

.image-grid .image {
  height: 100%;
  width: auto;
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

<div class="image-grid">
  <div class="image-wrapper"><img src="http://lorempixel.com/output/city-h-c-300-400-1.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="http://lorempixel.com/output/transport-h-c-300-400-5.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="http://lorempixel.com/output/cats-h-c-300-360-6.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="http://lorempixel.com/output/nature-h-c-300-335-10.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="http://lorempixel.com/output/transport-h-c-300-400-5.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="http://lorempixel.com/output/cats-h-c-300-360-6.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="http://lorempixel.com/output/nature-h-c-300-335-10.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="http://lorempixel.com/output/city-h-c-300-400-1.jpg" alt="" class="image"></div>

  <div class="image-wrapper"><img src="http://lorempixel.com/output/cats-h-c-300-360-6.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="http://lorempixel.com/output/city-h-c-300-400-1.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="http://lorempixel.com/output/transport-h-c-300-400-5.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="http://lorempixel.com/output/nature-h-c-300-335-10.jpg" alt="" class="image"></div>

</div>

Answer 2

您可以通过在包装上放置 padding-top: 133.33% 来保持 3:4 纵横比。因此，您可以设置内边距而不是设置高度。

您还需要将 position: relative 设置为包装器，将 position: absolute 设置为子项，以便子项的定位忽略填充。

以下代码段中有一个示例：

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  width: 25%;
}

.wrapper {
  padding-top: 133.33%;
  border: 1px solid red;
  position: relative;
}

.wrapper img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  object-fit: cover;
}

<div class="row">
  <div class="column">
    <div class="wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
    </div>
  </div>
  <div class="column">
    <div class="wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
    </div>
  </div>
  <div class="column">
    <div class="wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
    </div>
  </div>
  <div class="column">
    <div class="wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
    </div>
  </div>
  <div class="column">
    <div class="wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
    </div>
  </div>
  <div class="column">
    <div class="wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
    </div>
  </div>
  <div class="column">
    <div class="wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
    </div>
  </div>
  <div class="column">
    <div class="wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
    </div>
  </div>
  <div class="column">
    <div class="wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
    </div>
  </div>
  <div class="column">
    <div class="wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
    </div>
  </div>
  <div class="column">
    <div class="wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
    </div>
  </div>
  <div class="column">
    <div class="wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
    </div>
  </div>
  <div class="column">
    <div class="wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
    </div>
  </div>
</div>

Answer 3

试试这个：

.image-grid {
  display: flex;
  flex-wrap: wrap;
}

.image-grid .image-wrapper {
  position: relative;
  width: 25%;
  height: 0;
  padding-bottom: 33.3333%;
}

.image-grid .image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="image-grid">
  <div class="image-wrapper"><img src="https://picsum.photos/200/300?1.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/300/200?2.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/200/200?3.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/300/300?4.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/300/400?5.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/200/200?6.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/200/200?7.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/200/400?8.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/400/200?9.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/200/200?1.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/200/200?2.jpg" alt="" class="image"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/200/200?4.jpg" alt="" class="image"></div>
</div>

如何使 div 高度始终与其宽度成比例（没有黑客）？

How to make div height to be always proportional of its width (without hacks)?

html

css

percentage

flexbox