Блог

Главная - Вопросы по программированию - изображение, заполняющее всю ширину экрана

изображение, заполняющее всю ширину экрана

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Я хочу, чтобы изображение заполняло всю ширину экрана, но без удаления 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>

Комментарии:

1. style="width:100vw;"

2. Я сделал вам фрагмент

3. если ответ @JohnSmith не работает, попробуйте выполнить width: 100%

4. не работает ни с ‘width: 100vw’, ни с wirth ‘width: 100%’.

5. @palanganero для меня это работает, изображение имеет полную ширину без горизонтальной полосы прокрутки

Ответ №1:

Я думаю, ваша главная проблема в том, что вы используете более старую версию bootstrap, и я не уверен, существуют ли те классы, которые вы используете ( 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>