Question

我在div中嵌套了两列（宽度均设置为300px）。一个用于图像，另一个用于文本。

问题：我正在从第三方网站获取图片，因此它们的尺寸各不相同。有些在肖像中，有些在风景中。这搞砸了布局。人像照片可能会变得很高。受宽度限制的风景照片可能会变得非常短。

肖像太高：https://imgur.com/a/ewHNJyf
风景太短：https://imgur.com/a/tFOzCBX

是否有一种方法可以限制列的最大宽度和最大高度，从而使图像受到其侧面先打到max的限制？

我希望能达到最大高度，这样一来，如果拿到一张非常高的肖像照片，因为它是按比例缩放的，则达到最大值的高度将限制宽度。

我当前的代码：

.container {
  display: flex;
}

.column1,
.column2 {
  margin: 10px;
  flex-direction: column;
}

.column1 {
  width: 300px;
}

.column2 {
  width: 300px;
  justify-content: flex-end;
  display: flex;
}

#img {
  width: 100%;
}

p,
h4 {
  margin: 5px;
}

.container {
  justify-content: center;
  padding-top: 50px;
  margin: 0 auto;
}

<div class="container">
  <div id="art" class="img column1">
    <img src="image.jpg">
  </div>
  <div id="text" class="comment column2">
    <p>text</p>
  </div>
</div>

Answer 1

我想您想根据下一列中文本的高度调整图像大小。一次解决：

将图像移出流程，让文本确定整体高度
使用相对绝对定位来调整图像大小

最小示例：

{
        "proseWrap": "preserve",
                "overrides" :
                        [
                        {
                                "files": "*.vue",
                                "options": {
                                        "semi": true,
                                        "printWidth": 200
                                }
                        }
                        ]

}

.container {
  display: flex;
}
.column1,
.column2 {
  width: 300px;
}

.image-wrapper {
  position: relative;
}
.image-wrapper-inner {
  /* expands as much as its parent */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.image-wrapper img {
  /* percentage width and height will now work */
  max-width: 100%;
  max-height: 100%;
  /* use your favorite centering trick */
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

限制列的最大高度和最大宽度

1 个答案: