html - bootstrap 4 轮播全屏和自动裁剪

标签 html css bootstrap-4

当上传的图像有点长时,我在全屏执行 bootstrap 4 轮播时遇到问题。有没有一种方法可以使图像全宽但根据 position: center, background: cover 进行裁剪。换句话说,我正在尝试使页面不可滚动。

我试过引用这个网页:Bootstrap Carousel Full Screen 但每当我尝试另一个背景时,它只会拉伸(stretch)并创建一个滚动条。

这里是 github 仓库:https://github.com/celestialbunny/project1如果需要

最佳答案

尝试将 height:100vh 设置为 img 元素。用简单的话来说,它将高度设置为等于屏幕的可见高度。 vhviewport-height

如果它是背景,那么还有一些其他选项。

谢谢

关于html - bootstrap 4 轮播全屏和自动裁剪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54970784/

相关文章:

javascript document.write 变量

javascript - wrapAll 3类元素

html - 使用 CSS 在背景上显示多个图像?

javascript - 浏览器如何加载网站内容的视觉呈现

css - Bootstrap 导航栏上方的 4 页宽标题栏

java - Android webview 图像加载一次后不显示

asp.net - 无法在 Firefox 上切换

css - 仅更改菜单列表的滚动条

html - Bootstrap 4 布局行优先还是列优先?

css - Bootstrap css 样式未在 Angular 中应用或覆盖