-1

Как зафиксировать (и разместить) таким образом картинку в карточку? Если можно то лучше кодом показать

введите сюда описание изображения

2
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. Commented 4 сент. 2022 в 12:12
  • Возможно background-position. Commented 4 сент. 2022 в 12:21

1 ответ 1

1

В прошлом вашем вопросе я дал вам ответ, где сверстал такую карточку, карточки там уже лежат в сетке.

Продублирую код сюда, но с 4мя карточками.

body {overflow: hidden auto;}

.cards {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: streach;
  flex-wrap: wrap;
  width: calc(100% + 20px);
  margin-right: -20px;
  margin-bottom: -20px;
  counter-reset: steps;
}

.card {
  display: block;
  width: calc(100% / 2 - 20px);
  min-height: 380px;
  background: #fff;
  box-shadow: 0 5px 10px 0 rgba(0,0,0, .15);
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
}

.card::after {
  counter-increment: steps;
  content: counter(steps, decimal-leading-zero);
  display: inline-block;
  position: absolute;
  font-size: 200%;
  color: rgba(0,0,0, .2);
  right: 10px;
  bottom: 15px;
  pointer-events: none;
}

.card__image {
  display: block;
  width: 100%;
  position: relative;
}

.card__image::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: 34.16%;
}

.card__image img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
}

.card__info {
  display: block;
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
}

.card__info-title {
  font-size: 150%;
  font-weight: bold;
  color: #3015e9;
  margin: 0;
  margin-bottom: 19px;
}

.card__info-list {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card__info-list > li {
  margin-bottom: .5em;
}
<div class="cards">

  <div class="card">
    <div class="card__image">
      <img src="//i.imgur.com/gQpwb7j.png" alt="">
    </div>
    <div class="card__info">
      <h3 class="card__info-title">Введение</h3>
      <ul class="card__info-list">
        <li>Как работают сайты. Верстка</li>
        <li>Возможности HTML, CSS, JS</li>
        <li>Редактор кода. Codepen</li>
        <li>Работа с DevTools</li>
      </ul>
    </div>
  </div>

  <div class="card">
    <div class="card__image">
      <img src="//i.imgur.com/gQpwb7j.png" alt="">
    </div>
    <div class="card__info">
      <h3 class="card__info-title">Введение</h3>
      <ul class="card__info-list">
        <li>Как работают сайты. Верстка</li>
        <li>Возможности HTML, CSS, JS</li>
        <li>Редактор кода. Codepen</li>
        <li>Работа с DevTools</li>
      </ul>
    </div>
  </div>
  
  <div class="card">
    <div class="card__image">
      <img src="//i.imgur.com/gQpwb7j.png" alt="">
    </div>
    <div class="card__info">
      <h3 class="card__info-title">Введение</h3>
      <ul class="card__info-list">
        <li>Как работают сайты. Верстка</li>
        <li>Возможности HTML, CSS, JS</li>
        <li>Редактор кода. Codepen</li>
        <li>Работа с DevTools</li>
      </ul>
    </div>
  </div>
  
  <div class="card">
    <div class="card__image">
      <img src="//i.imgur.com/gQpwb7j.png" alt="">
    </div>
    <div class="card__info">
      <h3 class="card__info-title">Введение</h3>
      <ul class="card__info-list">
        <li>Как работают сайты. Верстка</li>
        <li>Возможности HTML, CSS, JS</li>
        <li>Редактор кода. Codepen</li>
        <li>Работа с DevTools</li>
      </ul>
    </div>
  </div>

</div>


А чтобы картинка была ограничена в размерах, при этом заполнялась пропорционально используется значение cover, используется в правилах background-size: cover - для фонового изображения и object-fit - для <img> или <video>.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.