Может Bootstrap 4 карты имеют плиточные фоновые изображения - PullRequest
Новая
       45

Может Bootstrap 4 карты имеют плиточные фоновые изображения

2 голосов
/ 01 апреля 2020

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

<div class="card img-fluid">
  <img class="card-img-top" src="images/backcard-brushedmetal.jpg">
  <div class="card-img-overlay">
    <div class="card-body text-justify">
      <h3 class="articleh3"><a href="#">xxxDescriptionxxx</a></h3>
      <p>
        <a href="#"><img src="images/xxxImagexxx.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;float: left" /></a>
        xxxSomeTextHerexxx
      </p>
    </div>
  </div>
</div>

Моя проблема в том, что я использую карты разных размеров, и сейчас размер моего изображения определяет размер моей карты; Я думаю, что я хочу наоборот (карта для управления размером отображаемого фона). Поэтому я подумал, можно ли выложить фоновое изображение так, чтобы оно просто заполняло фон, и тогда не должно иметь значения, какого размера карта или изображение.

Насколько я знаю, это может даже не быть возможным, и если нет, то хорошо, я поищу другой способ сделать что-то вроде:)

В любом случае, спасибо за любой совет: )

Джеймс

1 Ответ

0 голосов
/ 01 апреля 2020

Если единственная цель использования элемента img в качестве фона - используйте background-image CSS свойство , которое устанавливает фоновое изображение для элемента.

Редактировать для комментариев: Очевидно, что часть float вызывает некоторые "проблемы" в данной разметке, НО есть что-то большее ... Не могу понять, почему это не работает - поэтому я удаляю BS4 (добавлено 2 примера): 

.card.img-fluid {
  background: url(http://www.rocksquad.co.uk/images/backcard-brushedmetal.jpg) no-repeat;
  background-position: center;
  background-size: cover;
}
<div class="card img-fluid">
  <div class="card-img-overlay">
    <div class="card-body text-justify">
      <h3 class="articleh3"><a href="#">xxxDescriptionxxx</a></h3>
      <p>
        <a href="#"><img src="http://www.rocksquad.co.uk/images/backcard-brushedmetal.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;" /></a>
        xxxSomeTextHerexxx<br>xxxSomeTextHerexxx
      </p>
    </div>
  </div>
</div>
<hr>
<div class="card img-fluid">
  <div class="card-img-overlay">
    <div class="card-body text-justify">
      <h3 class="articleh3"><a href="#">xxxDescriptionxxx</a></h3>
      <p>
        <a href="#"><img src="http://www.rocksquad.co.uk/images/backcard-brushedmetal.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;" /></a>
        xxxSomeTextHerexxx<br>xxxSomeTextHerexxx<br>        xxxSomeTextHerexxx<br>xxxSomeTextHerexxx<br>        xxxSomeTextHerexxx<br>xxxSomeTextHerexxx<br>        xxxSomeTextHerexxx<br>
      </p>
    </div>
  </div>
</div>

На этот вопрос нужен какой-то "bootstrap 4 эксперт", чтобы ответить - очевидно, это не я (:

Старый (не работает) ответ:

В вашем случае, так как вы хотите, чтобы изображение охватывало элемент, вы можете сделать что-то подобное: 

<style>
.card.img-fluid {
  background: url(images/backcard-brushedmetal.jpg) no-repeat;
  background-position: center;
  background-size: cover;
}
</style>
<div class="card img-fluid">
  <div class="card-img-overlay">
    <div class="card-body text-justify">
      <h3 class="articleh3"><a href="#">xxxDescriptionxxx</a></h3>
      <p>
        <a href="#"><img src="images/xxxImagexxx.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;float: left" /></a>
        xxxSomeTextHerexxx
      </p>
    </div>
  </div>
</div>
...