Создайте сетку для фотографий с помощью CSS без тегов IMG - PullRequest
Новая
       7

Создайте сетку для фотографий с помощью CSS без тегов IMG

0 голосов
/ 05 ноября 2018

Я сейчас бездельничаю с небольшим проектом. Я хочу сделать сетку из фотографий 3х4 в HTML5 (без использования Div). Я также хочу добавить все картинки в CSS. Так что нет тега img в файле HTML.

Сетка также должна быть отзывчивой, когда вы масштабируете ее от размера рабочего стола до планшета, она должна стать сеткой для фото 2х4

и то же самое с мобильным, его нужно изменить на 1x4.

Мне удалось сделать сетку 3х4. Я борюсь с добавлением картинок в CSS. Я попробовал обычное: background-image: url ('picture.jpg'); но по какой-то причине это не работает.

Также сделать все масштабируемым не работает. Я пытался использовать медиа-запросы, но это не помогло.

Мой код: 

#Product_grid{
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;
  justify-content: center;
  margin: 10px;
}
.Product_img{
  width: 100%;
  height: 100%;
}
.grid-item1{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item2{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item3{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item4{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item5{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item6{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item7{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item8{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item9{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item10{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item11{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item12{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
  <article id="Product_grid">
	   <section class="grid-item1"></section>
     <section class="grid-item2"></section>
     <section class="grid-item3"></section>
     <section class="grid-item4"></section>
     <section class="grid-item5"></section>
     <section class="grid-item6"></section>
     <section class="grid-item7"></section>
     <section class="grid-item8"></section>
     <section class="grid-item9"></section>
     <section class="grid-item10"></section>
     <section class="grid-item11"></section>
     <section class="grid-item12"></section>
</article>

У кого-нибудь есть идеи, как сделать что-то подобное?

С уважением,

Макс

1 Ответ

0 голосов
/ 06 ноября 2018

Проблема в том, что вам нужно выбирать между относительным или абсолютным путем к изображениям, которые вы хотите включить.

Например: у вас есть index.html в корневом каталоге проекта, а изображения в каталоге projectroot / img, после чего вы можете использовать относительный путь к корневому каталогу проекта, абсолютные пути должны быть с сервера / компьютера -Корневая директория.

Попробуйте использовать этот синтаксис относительного пути:

section{ background-image: url("../imagedirectory/image.jpg");

...