Как зафиксировать (и разместить) таким образом картинку в карточку? Если можно то лучше кодом показать
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>
.
background-position
.