引导轮播中的响应式图像

Posted 2023-03-06

【中文标题】引导轮播中的响应式图像

【英文标题】：Responsive images in bootstrap carousel

【发布时间】：2021-02-04 09:00:17

【问题描述】：

我在引导轮播中的 div 中有不同的图像大小。它是横向或纵向图像，如果我将宽度设置为 100%，横向图像会变得完美，但肖像会变高。

如果我将 max-hight 设置为它，横向图像不会变成全宽。

Link to Wep-page

CSS：

.case-box 
margin-bottom: 1.5em;
display: flex;
width: 100%;
height: 420px;
align-items: center;
justify-content: start;


@media (min-width: 768px)
.case-box 
height: 428px;


@media (min-width: 1280px)
.case-box 
height: 540px;


.case-img 
width: auto;
max-height: 100%;

【参考方案1】：

通过在白框中创建图像来解决它，因此它们都具有相同的宽度和高度。简单但不是最好的。

【参考方案2】：

使用 css 设置图像：

max-width: 100%;
max-height: 100%;

无论宽度的高度如何，它都应该正确地调整它们。

【讨论】：

是的，但我希望肖像和风景一样高。

@RASALGHUL 根据您设置的比例，您的横向图像始终或多或少是容器高度的 88.5%。因此，只需将其设置为 max-height: 88.5%; 就可以了。现在，如果您想为所有图像精确固定高度，我建议您使用 javascript 获取所有图像，获取具有最低高度的图像并将此高度设置为所有其他图像

所以不可能只从 1920px 图像中获取高度并将其变为高度？

你的做法是，容器的高度为max-height:100%;，而width:auto 将占用容器的最大宽度。所以图像会保持比例。但是如果图像达到容器宽度的 100%，但它的高度比容器短，那么它就不会在高度上拉伸。所以这一切都基于容器的大小。所以这就是为什么如果你想让它们都具有相同的高度，那么你需要调整你的容器的大小。由于您的横向图像似乎都是 1920*1080，这意味着比例为 56.25%，因此每次调整高度时都需要调整宽度

通过应用如下比率：高度 / 0,5625 = 宽度 或 宽度 * 0,5625 = 高度

【参考方案3】：

您为什么不使用 Bootstrap 4 类 .img-fluid 来使图像具有响应性（.img-responsive 对于 Bootstrap 3）？

【讨论】：

尝试所有可能性：最大宽度：100%；最大高度：100%；宽度：100%；高度：100%；最小宽度：100%；最小高度：100%；看看哪一个最适合你