#html #css #flexbox #css-grid
Вопрос:
Я хочу сделать открытки для блога, которые выглядят так, используя сетку для всех карточек и гибкую компоновку внутри каждой карточки.
Теперь, когда я сокращаю веб-сайт до меньшей ширины, карты выглядят так.
Обратите внимание, что все изображения на карточке имеют одинаковую высоту и ширину.
Даже когда они уменьшены, все их размеры одинаковы на всех картах.
Когда исходные изображения, которые у меня есть, состоят из разных изображений, как я могу этого достичь ?
В качестве примера я привел
первое изображение —> 120×120
второе изображение —> 160х200
третье изображение — > 130×130.
Пожалуйста, игнорируйте все другие функции, такие как поле описания под изображением.
Мне просто интересно, как различные размеры изображений могут быть помещены во гибкий ящик, чтобы вести себя одинаково, как в приведенном выше примере..
Комментарии:
1. Итак, вы хотите, чтобы размер изображений был одинаковым или как?
2. @Paulie_D Да, независимо от размера изображения, я хочу, чтобы они были одинакового размера.
Ответ №1:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #444444;
height: 100vh;
}
main{
display: grid;
grid-template-areas: 'a b c d'
'e f g h'
'i j k l'
'm n o p';
width: 100%;
height: 100vh;
grid-gap: 5%;
justify-content: center;
margin-top: 300px;
}
.card{
height: 45vh;
width: 15vw;
background-color: aqua;
min-width: 120px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 0px 10px #fff;
}
.card:nth-child(1){
grid-area: a;
}
.card:nth-child(2){
grid-area: b;
}
.card:nth-child(3){
grid-area: c;
}
.card:nth-child(4){
grid-area: d;
}
.card:nth-child(5){
grid-area: e;
}
.card:nth-child(6){
grid-area: f;
}
.card:nth-child(7){
grid-area: g;
}
.card:nth-child(8){
grid-area: h;
}
.card:nth-child(9){
grid-area: i;
}
.card:nth-child(10){
grid-area: j;
}
.card:nth-child(11){
grid-area: k;
}
.card:nth-child(12){
grid-area: l;
}
.card:nth-child(13){
grid-area: m;
}
.card:nth-child(14){
grid-area: n;
}
.card:nth-child(15){
grid-area: o;
}
.card:nth-child(16){
grid-area: p;
}
img{
width: 100%;
} <main>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2021/09/06/01/13/coffee-6600644_960_720.jpg" alt="oops">
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Illum expedita, perspiciatis adipisci necessitatibus excepturi corrupti id
dolorum quibusdam ipsum aliquid a rem magni est saepe deleniti nam tempore fugiat assumenda.
</div>
</div>
</main> Это делается не так, как вы думаете. Изображения на веб-сайте, которые вы показываете, настраивают их размер в соответствии с размером карты, который соответствует размеру окна просмотра и в соответствии с минимальной шириной и высотой. Запуск в полноэкранном режиме и изменение размера: