如何调整矩形图像以在类似 instagram 的图像网格中显示为正方形而不丢失页面响应能力

Question

如果你们 take a look at the code，当我添加方形图像（第一行）时，网格将像 instagram 一样完美地适合。我想在添加不同形状的图像时使其适合相同的平方宽度和高度（第二行）。

问题是，例如，如果我只是尝试通过将 .column > img 选择器的宽度和高度从 100% 更改为 300px 来使其成为正方形，则图像会获胜如果不调整页面响应大小，所有内容都会变成一团乱七八糟的图像相互重叠。

body {
    font-family: "Open Sans", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

.container {
    width: 100%;
    max-width: 930px;
    margin-right: auto;
    margin-left: auto;
}

.column {
    width: 33.33%;
    margin-right: 30px;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 28px;
}

.column>img {
    width: 100%;
    height: 100%;
}

@media (max-width: 760px) {
    .row {
        margin-bottom: 3px;
    }

    .column {
        margin-right: 3px;
    }
}

@media (max-width: 450px) {
    .row {
        flex-direction: column;
        justify-content: center;
    }

    .column {
        width: 100%;
        margin-bottom: 6px;
    }
}

<div class="container">

   <div class="row">
       <div class="column">
           <img src="https://images.unsplash.com/photo-1498471731312-b6d2b8280c61?w=500&h=500&fit=crop">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1515023115689-589c33041d3c?w=500&h=500&fit=crop">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1502630859934-b3b41d18206c?w=500&h=500&fit=crop">
       </div>
   </div>

   <div class="row">
       <div class="column">
           <img src="https://images.unsplash.com/photo-1523354177913-be035fcee55e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1563281746-48bb478e9b2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1563170446-9c3c0622d8a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80">
       </div>
   </div>
</div>

有没有办法让所有图片都变成正方形，同时在调整页面大小时保持宽度和高度的响应性？提前致谢。

Answer 1

我做了一个解决方案。在我的解决方案中，我使用 object-fit 属性来调整图像大小。核实。希望对您有所帮助。

body {
    font-family: "Open Sans", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

.container {
    width: 100%;
    max-width: 930px;
    margin-right: auto;
    margin-left: auto;
}

.column {
    width: 33.33vw; /*These properties are changed*/
    height: 33.33vw; /*These properties are changed*/
    margin-right: 30px;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 28px;
}

.column>img {
    width: 33.33vw; /*These properties are changed*/
    height: 33.33vw; /*These properties are changed*/
    object-fit: cover; /*These properties are changed*/
}

@media (max-width: 760px) {
    .row {
        margin-bottom: 3px;
    }

    .column {
        margin-right: 3px;
    }
}

@media (max-width: 450px) {
    .row {
        flex-direction: column;
        justify-content: center;
    }

    .column {
        width: 100%;
        margin-bottom: 6px;
    }
}

<div class="container">

   <div class="row">
       <div class="column">
           <img src="https://images.unsplash.com/photo-1498471731312-b6d2b8280c61?w=500&h=500&fit=crop">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1515023115689-589c33041d3c?w=500&h=500&fit=crop">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1502630859934-b3b41d18206c?w=500&h=500&fit=crop">
       </div>
   </div>

   <div class="row">
       <div class="column">
           <img src="https://images.unsplash.com/photo-1523354177913-be035fcee55e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1563281746-48bb478e9b2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80">
       </div>
       <div class="column">
           <img src="https://images.unsplash.com/photo-1563170446-9c3c0622d8a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80">
       </div>
   </div>
</div>

Answer 2

您可以为此滥用填充。

tl;dr：https://jsfiddle.net/Hoargarth/u247vz0k/ 只需看看 fiddle，不言自明

首先我们使用弹性盒，为此我们需要一个弹性容器和弹性项目。

<div class="flex-container">

  <div class="flex-item">
    <div class="image-wrapper">
      <div class="image" style="background-image: url('https://www.url.to/image.png');">

      </div>
    </div>
  </div>

<!-- Any number of flex items inside container -->

</div>

这里不解释flex-system，我想你应该知道。但是对于不了解 flex 的每个人，这里有一个很好的解释：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

所以我们从 flex-item:

开始

position: relative因为我们需要下一个元素
(image-wrapper) 绝对定位到 flex-item

width: 32% 因为你想要每行 3 张图像，所以不要忘记给你 flex-container一个宽度

padding-bottom: 32% padding是关键，32% padding是相对于flex-container的宽度。因此，如果您使用 padding-bottom: 100%，flex-item 的高度将与 flex-container 宽度完全相同。在我们的例子中，我们想要一个二次图像，所以我们使用 32%

.flex-item {
    position: relative;
    width: 32%;
    padding-bottom: 32%;
}

接下来是image-wrapper:

position: absolute 因为我们不想让这个容器（或这个容器中的任何其他容器）占用更多空间 space.

overflow: hidden 以确保没有任何东西可以逃脱我们的二次图像并重叠到另一个容器

.image-wrapper {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

最后，image 本身：

这里没有魔法，只需将您的背景图片添加为 html 中的 background-image: url() 这样您就不必创建很多额外的类.

position: relative不记得为什么加了，可能是一些跨浏览器相关的东西吧。但是你可以尝试删除它，它在没有的情况下在 Firefox 上工作。

background *-size: cover 所以所有的二次方 space 都会被填满，无论图像大小如何； *-position: 50% 使图像完全居中（垂直和水平）； *-repeat: no-repeat 你真的不需要它，因为 background-size: cover 填满了整个 space，我只是添加它所以没有重复图像的特殊情况

.image {
  position: relative;
  height: 100%;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}

此解决方案开箱即用，但您可以使用简单的媒体查询更改每行的图像数量：示例：

/*Window Width smaller 800px with two images per row*/
.flex-item {
  position: relative;
  width: 48%;
  padding-bottom: 48%;
}

/*Window Width larger or equal 800px with three images per row*/
@media (min-width: 800px){
    .flex-item {
    width: 32%;
    padding-bottom: 32%;
  }
}

我希望这是可以理解的，如果不能让我知道！

如何调整矩形图像以在类似 instagram 的图像网格中显示为正方形而不丢失页面响应能力

How to adjust rectangular images to show up as a square in an instagram-like grid of images without losing page responsiveness

html

css

image

flexbox

responsiveness