OC v3.х Нужна помощь в решении задачи (вид карточки товара)

[shtt]

Стоит цель, чтобы в карточке товара фото было на всю ширину страницы, а на нем в определенном месте был текст. Точнее фото товара было фоном в карточке
Может кто сможет подсказать на базе чего это можно реализовать.

 

[brus46]

Так все просто. Блок с фото удаляешь. Фото ставишь, как background у блока описания, например. Ширину блока описания выставляешь на 100% (width: 100%)
Или нужен конкретный код?

 

[shtt]

Если можно, то лучше разжевать.

 

[brus46]

<div style="background-image: url('путь_к_фото/фото.jpg'); background-position: center center; background-size: cover;"> //это картинка на фоне у блока, ее вставляешь либо динамически, например в коде шаблона (что скорее всего), либо в коде css, если картинка не изменяется
    //далее делаешь все, что нужно с блоками как обычно
    <div>
        <span>Какой то текст</span>
    </div>
    <div>
        <span>Какой то код</span>
    </div>
</div>

Как то так. Если более конкретно - нужен пример кода

 

[innerjoin86]

Интересно, как это будет выглядеть, когда контент карточки будет больше , чем фото на бэкграунде?
Или контент карточки товара жестко будет подгоняться под высоту фото на бэкграунде?

 

[brus46]

Придётся поменять размер фото товара в настройках, сделать его гораздо больше и наверняка перезагрузить фото товаров. В тех настройках, которые я прислал фото всегда по центру и подстраиваться под ширину, либо высоту блока. Так что контента может быть сколько угодно, в разумных пределах, конечно))

 

[brus46]

Можно и жёстко подгонять по блоку, только делать это для каждого разрешения экрана по своему, иначе будет не респонсивно

 

[innerjoin86]

Вероятно еще и с прозрачностью (opacity) придется "играться", чтобы контент на фоне картинки контрастно выглядел.

 

[brus46]

ну, это мелочи, главное сверстать все грамотно

 

[capkisselka]

Стоит цель, чтобы в карточке товара фото было на всю ширину страницы, а на нем в определенном месте был текст. Точнее фото товара было фоном в карточке
Может кто сможет подсказать на базе чего это можно реализовать.

А можно небольшой пример, как Вы себе это представляете?
Очень интересно)

 

[SinTaksiS]

Стоит цель, чтобы в карточке товара фото было на всю ширину страницы, а на нем в определенном месте был текст. Точнее фото товара было фоном в карточке
Может кто сможет подсказать на базе чего это можно реализовать.

Вот образец накидал, реализовывайте...

<div class="product-card">
  <div class="product-image" style="background-image: url('kakoi/to/image.jpg')">
    <div class="product-description">
      <h2>Название продукта</h2>
      <p>Описание продукта</p>
    </div>
  </div>
</div>

.product-card {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.product-image {
  position: relative;
  height: 500px;
  background-size: cover;
  background-position: center center;
}
.product-description {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  width: 70%;
}
.product-description h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
}
.product-description p {
  font-size: 1.5em;
}

В этом примере мы используем CSS свойство background-image для установки фотографии товара в качестве фона для элемента .product-image. Затем мы добавляем блок .product-description, который содержит заголовок и описание товара, который будет расположен поверх фотографии товара. Свойством position: absolute мы задаем расположение блока .product-description поверх фонового изображения. Затем мы используем свойство transform: translate(-50%, -50%), чтобы выровнять содержимое по центру фотографии товара. Удачи!