html – 作为浏览器宽度的裁剪图像侧面在Bootstrap轮播中减少

html – 作为浏览器宽度的裁剪图像侧面在Bootstrap轮播中减少,第1张

概述我有一个带有类似于 site的背景图像的旋转木马 我有图像,我想延伸到浏览器宽度的100%.当用户缩小其浏览器的宽度时,应在右侧和左侧裁剪图像.不应调整图像大小(高度变化的位置).我正在使用标准的Bootstrap轮播布局 最终结果应该是这样的 中间的蓝色矩形是容器,其宽度应始终保持不变.在到达此容器的边框之前,背景图像(带有鞋子的深绿色)应该随着浏览器宽度的减小而右侧和左侧裁剪. 最好的方法是什 我有一个带有类似于 site的背景图像的旋转木马

我有图像,我想延伸到浏览器宽度的100%.当用户缩小其浏览器的宽度时,应在右侧和左侧裁剪图像.不应调整图像大小(高度变化的位置).我正在使用标准的bootstrap轮播布局

最终结果应该是这样的

中间的蓝色矩形是容器,其宽度应始终保持不变.在到达此容器的边框之前,背景图像(带有鞋子的深绿色)应该随着浏览器宽度的减小而右侧和左侧裁剪.

最好的方法是什么?

解决方法 以下是诀窍:
.carousel.slIDe{    max-wIDth: 1600px; //the largest you want the image to stretch    min-wIDth: 900px; //the "container" wIDth     overflow: hIDden;}.carousel-inner{   wIDth: 1600px;   left: 50%;   margin-left: -800px;}

关键是左:50%和左边距:-800px组合.负边距应该是最大宽度的一半(在这种情况下,1600px).

总结

以上是内存溢出为你收集整理的html – 作为浏览器宽度的裁剪图像侧面在Bootstrap轮播中减少全部内容,希望文章能够帮你解决html – 作为浏览器宽度的裁剪图像侧面在Bootstrap轮播中减少所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1104750.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存