Как обрезать пополам изображение карты в bootstrap / css?

Question

Я пытаюсь разрезать пополам это изображение и показать эту проектную область на карте, вот скриншот в качестве справки, но я не совсем уверен, как:

Это мой код:

<div class="card">
  <img class="card-img-top" src="source" alt="icon">
  <div class="card-body">
    <h4 class="card-title">Card Title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipsicing elit. Illo, quas.</p>
    <a class="btn btn-success btn-block" href="#">Read More</a>
  </div>
</div> 

Answer 1

Используется свойство object-fit. Будьте осторожны, это не работает в IE, но работает в Edge. Если вам нужна поддержка IE11, я могу обновить ответ.

.card img {
  /* change the height to whatever you want */
  height: 100px;
  object-fit: cover;
  display: block;
  width: 100%;
}

<div class="card">
  <img class="card-img-top" src="https://via.placeholder.com/600x800" alt="icon">
  <div class="card-body">
    <h4 class="card-title">Card Title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipsicing elit. Illo, quas.</p>
    <a class="btn btn-success btn-block" href="#">Read More</a>
  </div>
</div>

Answer 2

Вот ссылка на codepen

Другое элегантное решение, которое я предпочитаю, - добавить изображение в качестве CSS background-image. Тогда у вас есть полный контроль над отображением изображения в div

, просто создайте добавьте следующий CSS, связанный с .card-img-top

  .card-img-top {
    background: url(https://i.stack.imgur.com/7nNO4.png);
    max-height: 100px;
    height: 100px;
    max-width: 600px;
    margin:auto;
    background-size:200px 400px ;
    background-position: 0px 40%;
    position:relative;
}

2 наиболее важными атрибутами являются background-size и background-position

background-size - определяет размер фонового изображения

background-position где первый аргумент - ось x, а второй y ось