保持轮播中的图像宽高比

小编典典

css

我正在使用Bootstrap创建轮播，我的图像很大，因此当屏幕小于图像时，不会保持该比例。

我该如何改变？

这是我的代码：

.carousel .item {
  height: 500px;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

我需要图片适合100％的宽度，但要保持其500px的高度（我认为是500px），这意味着在较小的屏幕上我们看不到图片的最左侧和最右侧。

我尝试将图像包含在div中并添加

overflow: hidden;
width: 100%;
height: 500px;
display: block;
margin: 0 auto;

但这不起作用

谢谢！

阅读 341

2020-05-16

共1个答案

小编典典

问题在于引导CSS：

img {
  max-width: 100%;
  width: auto   9;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

设置max-width: 100%;图像不会超过视口。您需要在CSS上覆盖该行为：

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
  max-width: none;
}

请注意max-width: none;底部添加的内容。这是默认的最大宽度值，并且未设置限制。

2020-05-16