Я делаю CSS-сетку изображений с надписями и хочу, чтобы изображения отображались как можно большего размера, при этом заголовки занимают как можно меньше места.
Я хочу, чтобы строка заголовка была узкойи строка изображения должна быть глубокой, не все строки имеют тот же размер, что и мой код.
+---------+---------+---------+---------+ | caption | caption | caption | caption | +---------+---------+---------+---------+ | image | image | image | image | | image | image | image | image | | image | image | image | image | | image | image | image | image | | image | image | image | image | +---------+---------+---------+---------+
Мое решение показывает строки для надписей и строки для изображений на одной высоте, вместо того, чтобы делать строки для изображений максимально большими и использовать подгонку объектов для предотвращения соотношения сторонизображения скомпрометированы.
Я поместил код в кодовое поле https://codepen.io/charlbury/pen/RedWWB?editors=1100
CSS:
.WHR-visualiser { display: flex; width: 660px; height: 328PX; } .left { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 5px; width: 100%; height: 100%; } .caption { font-size: 0.6em; text-align: center; } .left>div img { max-width: 100%; max-height: 100%; object-fit: cover; border-radius: 4px; }
HTML:
<h1>Header:</h1> <div class="WHR-visualiser"> <div class="left"> <div class="caption">1. Brandenburg Gate</div> <div class="caption">1. Brandenburg Gate with a longer name than the others</div> <div class="caption">1. Brandenburg Gate</div> <div class="caption">1. Brandenburg Gate</div> <div class="caption">1. Brandenburg Gate</div> <div class="caption">1. Brandenburg Gate</div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/ea5762e7-b1a3-416d-89a6-16f934d44867.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a112a543-9917-400a-a021-f9430e2d594a.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/5a368d6d-2df6-40b7-b1fc-5a5725bef99a.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/05c160f9-06b3-4f6b-bbff-6aad7ff923b0.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/dbd0fb84-b4ff-4404-be39-cf7aa6329916.jpg" /> </div> <div class="caption">1. Brandenburg Gate</div> <div class="caption">1. Brandenburg Gate</div> <div class="caption">1. Brandenburg Gate</div> <div class="caption">1. Brandenburg Gate</div> <div class="caption">1. Brandenburg Gate</div> <div class="caption">1. Brandenburg Gate</div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/dbd0fb84-b4ff-4404-be39-cf7aa6329916.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/05c160f9-06b3-4f6b-bbff-6aad7ff923b0.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/5a368d6d-2df6-40b7-b1fc-5a5725bef99a.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a112a543-9917-400a-a021-f9430e2d594a.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/ea5762e7-b1a3-416d-89a6-16f934d44867.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" /> </div> <div class="caption">1. Brandenburg Gate</div> <div class="caption">1. Brandenburg Gate</div> <div class="caption">1. Brandenburg Gate</div> <div class="caption">1. Brandenburg Gate</div> <div class="caption">1. Brandenburg Gate</div> <div class="caption">1. Brandenburg Gate</div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/05c160f9-06b3-4f6b-bbff-6aad7ff923b0.jpg" /> </div> <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/05c160f9-06b3-4f6b-bbff-6aad7ff923b0.jpg" /> </div> </div> </div> <h1>Footer:</h1>
просто добавьте ширину изображения 100% ко всем изображениям одинакового размера
.WHR-visualiser { display: flex; width: 660px; height: 328PX; } .left { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 5px; width: 100%; height: 100%; } .caption { font-size: 0.6em; text-align: center; } .left>div img { max-width: 100%; max-height: 100%; object-fit: cover; border-radius: 4px; width:100% ; }