当前位置：文江博客话题详情

具有缩小图像的 Flexbox 的宽度为原始图像大小（不会折叠到渲染图像宽度）

发布于 2025-01-11 14:37:49 字数 1081 浏览 3 评论 0原文

带有图像的弹性容器会缩小以适应容器的高度，从而在调整大小之前保持原始图像的宽度。因此容器不会折叠到缩小图像的新宽度。

查看轮胎周围的阴影区域：

这是关于轮胎图像的。

原始图像尺寸：292x440px

渲染图像尺寸：137x206px

div.cont_1 尺寸：292px（应该/希望有；）137px）

代码如下： HTML 示例：

.cont_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.cont_2 {
  display: flex;
  overflow: auto;
  justify-content: center;
}

.cont_3 {
  flex: 1;
}

<div class="cont_1">
  <div class="cont_2">
    <img src="https://dummyimage.com/292x440/000/fff" class="" alt="alt-text">
  </div>
  <div class="cont_3">Title</div>
</div>

我如何摆脱该图像周围的空间。

最后，我希望轮胎和标题能够很好地相互居中，周围没有烦人的空间。

原文

A flex container with an image which is beeing shrinked to fit the containers height keeps the width of the original image before it was resized. So the container does not collapse to the new width of the shrinked image.

See the hatched area around the tire:

It's about the tire image.

Original Image size: 292x440px

Rendered Image Size: 137x206px

Size of div.cont_1: 292px (should be/would like to have ;) 137px)

Code is as follows:
Example HTML:

.cont_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.cont_2 {
  display: flex;
  overflow: auto;
  justify-content: center;
}

.cont_3 {
  flex: 1;
}

<div class="cont_1">
  <div class="cont_2">
    <img src="https://dummyimage.com/292x440/000/fff" class="" alt="alt-text">
  </div>
  <div class="cont_3">Title</div>
</div>

How do I get rid of that space around that image.

In the end I'd like to have the tire and the title nicely centered over each other with no annoying space around them.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

将军与妓 2025-01-18 14:37:49

你想要这样吗：

.cont_1 {
  display: flex;
  flex-direction: column;
  height: max-content;
  flex-wrap: nowrap;
}

.cont_2 {
  width: 30%;
}

img {
  width: 100%;
  height: 100%;
}

.cont_3 {
  text-align: center;
  width: 30%;
}

<div class="cont_1">
  <div class="cont_2">
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" class="" alt="alt-text">
  </div>
  <div class="cont_3">Title</div>
</div>

Do you want like this:

.cont_1 {
  display: flex;
  flex-direction: column;
  height: max-content;
  flex-wrap: nowrap;
}

.cont_2 {
  width: 30%;
}

img {
  width: 100%;
  height: 100%;
}

.cont_3 {
  text-align: center;
  width: 30%;
}

<div class="cont_1">
  <div class="cont_2">
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" class="" alt="alt-text">
  </div>
  <div class="cont_3">Title</div>
</div>

回复收藏 0 原文

稚然 2025-01-18 14:37:49

在 .cont_1 中更改：

显示：flex；
到
显示：内联柔性；

这应该可以防止父容器在屏幕上伸展并删除其中的额外空间。

.cont_1 {
  display: inline-flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.cont_2 {
  display: flex;
  overflow: auto;
  justify-content: center;
}

.cont_3 {
  flex: 1;
}

<div class="cont_1">
  <div class="cont_2">
    <img src="https://dummyimage.com/292x440/000/fff" class="" alt="alt-text">
  </div>
  <div class="cont_3">Title</div>
</div>

In .cont_1 change:

display: flex;
to
display: inline-flex;

This should prevent the parent container from stretching across the screen and remove the extra space within.

.cont_1 {
  display: inline-flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.cont_2 {
  display: flex;
  overflow: auto;
  justify-content: center;
}

.cont_3 {
  flex: 1;
}

<div class="cont_1">
  <div class="cont_2">
    <img src="https://dummyimage.com/292x440/000/fff" class="" alt="alt-text">
  </div>
  <div class="cont_3">Title</div>
</div>

回复收藏 0 原文

~没有更多了~