Блог

Главная - Вопросы по программированию - Сетка CSS сломана, когда я заменяю фоновое изображение тегом изображения

Сетка CSS сломана, когда я заменяю фоновое изображение тегом изображения

#css

Вопрос:

Мне нужно решить небольшую проблему. Я создаю сетку CSS. Это сетка.

   .cover {
    max-width: 1080px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
  }

figure {
    margin: 1px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
  }

.horizontal {
    padding-top: calc(700 / 1400 * 100%);
    grid-column: span 2;
    grid-row: span 1;
    max-width: 720px;
  }
  .large {
    padding-top: calc(700 / 700 * 100%);
    grid-column: span 2;
    grid-row: span 2;
    max-width: 720px;
  }
  .vertical {
    padding-top: calc(560 / 360 * 100%);
    grid-column: span 1;
    grid-row: span 2;
    max-width: 360px;
  }
  .small {
    padding-top: calc(700 / 700 * 100%);
    grid-column: span 1;
    grid-row: span 1;
    max-width: 360px;
  } 
 <section class="cover">
  <figure style="background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/1350x700.png?text=1350x700')" class="horizontal"></figure>
  <figure style="background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/675x700.png?text=675x700')" class="small"></figure>
    <figure style="background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/675x700.png?text=675x700')" class="small"></figure>
      <figure style="background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/675x700.png?text=675x700')" class="small"></figure>
        <figure style="background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/675x700.png?text=675x700')" class="small"></figure>
</section>

Мне нужно удалить изображение из figure tag стиля фона, заменив его тегом изображения.
В то же время изображение должно быть доступно для кликабельности.

Я пытаюсь с

 <section class="cover">
  <a href="">
    <figure class="horizontal">
       <img src="https://via.placeholder.com/1350x700.png?text=1350x700">
    </figure>
 </a>
 <a href="">
 <figure class="small">
       <img src="https://via.placeholder.com/700x700.png?text=1350x700">
    </figure>
 <a href="">
 ....

но я не могу найти способ сохранить сетку. Все сломано.

Изменить: Я добавляю две информации. Сетка генерируется динамически бэкендом и имеет разные макеты, структура каждой плитки должна быть одинаковой.

Размер и соотношение сторон каждой плитки определяются классом, который, конечно же, присваивается элементу в соответствии с макетом.

Поэтому я должен использовать класс.

Ответ №1:

Пожалуйста, измените свой стиль вот так.

 ...

  a {
    grid-column: span 2;
    grid-row: span 1;
    max-width: 720px;
  }
  img {
    max-width: 720px;
  }

  .horizontal {
    grid-column: span 2;
    grid-row: span 1;
    max-width: 720px;
  }

...

Ответ №2:

Пожалуйста, взгляните на фрагмент ниже:

 .cover {
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
}
figure {
  margin: 1px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}
a {
  grid-column: span 2;
  grid-row: span 1;
  max-width: 720px;
  margin-bottom: -4px;
}
a .horizontal {
  padding-top: 0 !important;
}
img {
  width: 100%;
}
.horizontal {
  padding-top: calc(700 / 1400 * 100%);
  grid-column: span 2;
  grid-row: span 1;
  max-width: 720px;
}
.large {
  padding-top: calc(700 / 700 * 100%);
  grid-column: span 2;
  grid-row: span 2;
  max-width: 720px;
}
.vertical {
  padding-top: calc(560 / 360 * 100%);
  grid-column: span 1;
  grid-row: span 2;
  max-width: 360px;
}
.small {
  padding-top: calc(700 / 700 * 100%);
  grid-column: span 1;
  grid-row: span 1;
  max-width: 360px;
} 
 <section class="cover">
<a href="">
    <figure class="horizontal">
       <img src="https://via.placeholder.com/1350x700.png?text=1350x700">
    </figure>
 </a>
  <!--<figure style="background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/1350x700.png?text=1350x700')" class="horizontal"></figure>-->
  <figure style="background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/675x700.png?text=675x700')" class="small"></figure>
    <figure style="background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/675x700.png?text=675x700')" class="small"></figure>
      <figure style="background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/675x700.png?text=675x700')" class="small"></figure>
        <figure style="background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/675x700.png?text=675x700')" class="small"></figure>
</section>

Комментарии:

1. спасибо, но мне нужно сохранить класс, потому что это только один из 6 макетов, которые может использовать эта сетка. И с бэкэнда я могу назначить фигуре, или ссылке, или изображению каждой плитки класс.

Метки: ,