填满整个屏幕宽度的图像答案

【问题标题】：image that fills the entire width of the screen填满整个屏幕宽度的图像
【发布时间】：2021-03-21 00:14:54
【问题描述】：

我希望图像填满屏幕的整个宽度，但不从图像中删除 class = "img-fluid d-block"。图像如下所示： https://postimg.cc/2qw4GK4q

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <img src="https://i.postimg.cc/j5VZxV2h/Captura-de-pantalla-de-2020-12-09-16-25-58.png" class="img-fluid d-block">
    </div>
  </div>
</div>

【问题讨论】：

style="width:100vw;"
我给你做了一个sn-p
如果@johnSmith 的回答不起作用，请尝试width: 100%
不工作，也不能用 'width:100vw' 也不能用 'width: 100%'
@palanganero 对我来说它可以工作，图像是全宽的，没有水平滚动条

标签： html css twitter-bootstrap

【解决方案1】：

我认为您的主要问题是您使用的是旧版本的引导程序，我不确定您使用的那些类（img-fluid 和 d-block）是否存在于旧的 3.x 版本中

在下面的示例中，唯一需要的更改是将vw-100 类添加到图像并将p-0 类添加到容器div。我删除了未使用的脚本块等以使其更清晰。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-12 p-0">
      <img src="https://i.postimg.cc/j5VZxV2h/Captura-de-pantalla-de-2020-12-09-16-25-58.png" class="img-fluid d-block vw-100">
    </div>
  </div>
</div>

【讨论】：