引导轮播中的响应图像

Question

我在引导轮播中的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%;
}

Answer 1

为什么不使用Bootstrap 4类.img-fluid来使图像响应（对于Bootstrap 3是.img-response）？

Answer 2

使用CSS设置图像：

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

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

Answer 3

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