gpt4 book ai didi

html - 使用 Bootstrap 使图像跨越浏览器的整个宽度

转载 作者:行者123 更新时间:2023-11-28 03:23:56 24 4
gpt4 key购买 nike

我有一个大图像,我想使用浏览器的整个宽度来显示它。

我的代码是:

<html><body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3> Welcome! </h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main_image">
<img src="..."/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main_content">....</div>
</div>
</div>
</div>
</body></html>

Bootstrap 将自动创建边距/填充以使图像适合页面的中心。

有没有办法始终让主图像适合浏览器的整个宽度,但保留页面上其他所有内容的填充/边距?

最佳答案

最好的办法是将图像指定为背景图像。

这是一个 JSFiddle ( https://jsfiddle.net/qoaqjgpz ),其中只有 http://startbootstrap.com/template-overviews/full-width-pics/ 中最重要的内容.

.html:

<div class="image-bg-fixed-height">
</div>

.css:

.image-bg-fixed-height {
background: url('http://lorempixel.com/g/1920/500/') no-repeat center center scroll;
height: 450px;
}

.img-center {
margin: 0 auto;
}

如果这就是您要搜索的内容,请告诉我。

关于html - 使用 Bootstrap 使图像跨越浏览器的整个宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22467507/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com