Как сделать так, чтобы изображения накладывались на границы карты в bootstrap 4?

Question

Когда вы используете карты, вся карта имеет рамку.Это создает не очень красиво выглядящее смещение пикселей в нижних углах изображения.Похоже, что изображение на один пиксель слишком далеко влево.

Я пытался задать отрицательные поля изображения и позиционирование влево и вправо, но это не работает.

Есть ли что-нибудь лучшее?практический или элегантный способ сделать изображение перекрывающим границы карты?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-5 px-5">
  <div class="card-deck">
    <div class="card bg-light">
        <img class="card-img-top" src="https://via.placeholder.com/500x180/095865/000000">
      <div class="card-body text-center">
        <h2 class="card-title">Lorem ipsum</h2>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
      </div>
    </div>
    <div class="card bg-light">
        <img class="card-img-top" src="https://via.placeholder.com/500x180/095865/000000">
      <div class="card-body text-center">
        <h2 class="card-title">Lorem ipsum</h2>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
      </div>
    </div>
  </div>
  
</div>

jsfiddle

Answer 1

Вы можете удалить класс границы .card и вместо этого присвоить границу классу .card-body.

.card { border: unset !important; }
.card-body { border: 1px solid rgba(0,0,0,.125); border-radius: 0 0 .25rem .25rem; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-5 px-5">
  <div class="card-deck">
    <div class="card bg-light">
        <img class="card-img-top" src="https://via.placeholder.com/500x180/095865/000000">
      <div class="card-body text-center">
        <h2 class="card-title">Lorem ipsum</h2>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
      </div>
    </div>
    <div class="card bg-light">
        <img class="card-img-top" src="https://via.placeholder.com/500x180/095865/000000">
      <div class="card-body text-center">
        <h2 class="card-title">Lorem ipsum</h2>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
      </div>
    </div>
  </div>
  
</div>

Answer 2

попробуй так

.card-img-top {
    margin-top: -1px;
    margin-left: -1px;
    margin-right: -1px;
    width: calc(100% + 2px);
   }

http://jsfiddle.net/lalji1051/5psLgxe2/3/