Как удалить «пробелы» между изображениями и стороной проводника в HTML и CSS - PullRequest
Новая
       26

Как удалить «пробелы» между изображениями и стороной проводника в HTML и CSS

0 голосов
/ 11 апреля 2019

Я использую загрузчик, и между изображениями есть пробел, который я не могу удалить

Я попытался установить максимальную ширину, подгонку объекта и смещение влево, а также удалить отступы 

<style>
    body {
        font-family: Arial, Helvetica, sans-serif;
        background-color: white;
    }
    .top {
        position: absolute;
        top: 0;
    }
    .imageStyle{
        height: 100%;
        width: 100%;

    }
    .c {
        background-color: black;
    }
</style>

    <div class="container-fluid top">
        <div class="row">
            <div class="col-7">
                    <img src="Images/Background.png" align="left" class="img-fluid float-left imageStyle back">
            </div>
            <div class="col-5 c">
            </div>           
        </div>
    </div>

Ответы [ 3 ]

0 голосов
/ 11 апреля 2019

добавить * к вашему CSS, он выбирает все элементы в DOM, затем удаляет отступы и поля, добавляя отступы: 0; и margin: 0 ;, попробуйте заменить тег img тегом div, а затем добавьте background-image к вашему css. 

*{
  padding: 0; margin: 0;
}
.image-style{
  background-image: url("https://images.pexels.com/photos/1137745/pexels-photo-1137745.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 50vh;
}
.c{
  background-color: #000;
  height: 50vh;
}
<div class="container-fluid top">
  <div class="row">
    <div class="col-7 image-style">
      <!-- I M A G E -->
    </div>
    <div class="col-5 c">
    </div>           
  </div>
</div>
0 голосов
/ 08 мая 2019

Я использовал класс no-gutters в начальной загрузке

0 голосов
/ 11 апреля 2019

Ну, классы Bootstrap col-* имеют встроенные отступы (padding-left: 15px, padding-right: 15px). Вы можете удалить это заполнение, назначив класс px-0** в col-7 div.

** комплектов padding-left: 0 и padding-right: 0

см. Здесь: https://codepen.io/anon/pen/pBeMLy

Это источник вашей проблемы или вы думаете о чем-то еще?

...