Высота макета сетки не совпадает с высотой содержимого

URL-адрес предварительного просмотра: https://asilklife.myshopify.com/?preview_theme_id=132753031414.

Размер изображения 800 x 800 пикселей, поэтому высота контейнера сетки всегда на 6 пикселей больше.

<div class = "grid-wrapper">
  <div class = "wrapper-item">
    <img src = "https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class = "wrapper-item">
    <img src = "https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class = "wrapper-item">
    <img src = "https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class = "wrapper-item">
    <img src = "https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
</div>


<style type = "text/css">
  .grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: red;
  }
  
  .wrapper-item img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
</style>

css

16.05.2022 06:06

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

<img> имеет встроенное отображаемое значение по умолчанию, поэтому добавьте display: block;.

<div class = "grid-wrapper">
  <div class = "wrapper-item">
    <img src = "https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class = "wrapper-item">
    <img src = "https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class = "wrapper-item">
    <img src = "https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class = "wrapper-item">
    <img src = "https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
</div>


<style type = "text/css">
  .grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: red;
  }
  
  .wrapper-item img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
</style>

16.05.2022 06:17

Другие вопросы по теме

Как динамически стилизовать в освещении?

HTML, проблемы с настройкой нижнего колонтитула веб-страницы

Смайлики делают отображение: блоки div выше

Проблемы CSS и HTML со стилями изображений

Продолжительность перехода курсора создает небольшие задержки

Открытие новой страницы после успешной отправки формы с помощью Php

Как использовать HTML-код, присутствующий в строке?

Разместите ввод и кнопки на одной линии

Заставьте мяч отскакивать с уменьшением высоты каждого последующего отскока, используя только CSS и HTML

Видимость скрыта после воспроизведения анимации

Высота макета сетки не совпадает с высотой содержимого

Ответы 1

Другие вопросы по теме

Похожие вопросы