Bootstrap 3中具有最小高度和自动裁剪的响应全宽旋转木马

提问于 2024-04-23T18:24:34+08:00

浏览次

4

为了在Bootstrap 3中创建一个全宽度的轮播，我把它直接放在一排，没有包装容器 . 旋转木马完美延伸至全屏宽度，并可扩展至手机格式 . 但问题是：由于旋转木马的宽度为100％，旋转木马在手机上的刻度太大（320像素宽）：技术上是正确的，但如果高度较高则会很好 .

问题：如何在最小宽度上设置最小高度，保持图像宽高比和左右裁剪？

2 回答

1
我将旋转木马内部设置为宽于屏幕的负边距 . 这使得旋转木马溢出并且看起来更高且更窄，有效地裁剪左右 . 在较大的屏幕上，我将其设置回正常状态以显示完整图像 . 最后，小心你有溢出：隐藏;在正确的父元素上，以便移动用户不会遇到意外的侧滚动 .
```
.carousel-inner{
  width: 120%;
  margin-left: -10%;
}

@media (min-width: 768px){
  .carousel-inner{
    width: 100%;
    margin: 0;
  }
}
```
回复于 2024-04-23T18:24:34+08:00
3

你的img宽度是100％，当它缩放它的比例高度时，你可以用.carousel-inner> .item> a> img {max-width：200％}和媒体查询来修复它

甚至这个：Twitter Bootstrap: Have carousel images full width and height

回复于 2024-04-23T18:24:34+08:00

相关问题