Блог

У меня есть горизонтальный гибкий контейнер, в котором перечислены продукты по горизонтали:

HTML:

 <div class="container">
  <div class="product">
    <div class="product-photo"><img src="/url" /></div>
    <div class="product-name">Jeans</div>
  </div>
  <div class="product">
    <div class="product-photo"><img src="/url" /></div>
    <div class="product-name">Blouse</div>
  </div>
  <div class="product">
    <div class="product-photo"><img src="/url" /></div>
    <div class="product-name">Shoes</div>
  </div>
</div>
 

CSS (упрощенный):

 .container {display: flex; justify-content: left;}
.product {width: 100%;}
.product-photo {width: 100%;}
.product-photo > img {width: inherit;}
.product-name {}
 

Может возникнуть ситуация, когда изображение продукта отсутствует, что приводит к тому, что этот product элемент сворачивается, чтобы содержать только его название, выглядящее следующим образом:

 --------  Blouse    --------
|      |            |      |
|      |            |      |
--------            --------
Jeans               Shoes
 

Я хотел бы отобразить цвет фона на product-photo элементе, чтобы указать отсутствующее изображение и сохранить согласованность гибкого дисплея, как это:

 --------  --------  --------
|      |  $$$$  |      |
|      |  $$$$  |      |
--------  --------  --------
Jeans     Blouse    Shoes

$ = missing img element but height and background color from parent product-photo element
 

Соотношение размер / формат изображения продукта является динамическим, и поэтому я не могу установить фиксированную ширину или высоту пикселей для каких-либо элементов для расчетов. Есть ли какой-либо гибкий хак дисплея, который может помочь сохранить этот дисплей нетронутым? CSS-сетка не является опцией из-за поддержки браузера. Ищете чистое решение CSS, без JS.

Я вижу, что вы не придали никакого значения своим дивам. Вот почему дивы принимают высоту своего содержимого. В этой ситуации, когда вы удаляете изображение, ваш div уменьшается до размера заголовка. Вы можете использовать что — то подобное для решения этой проблемы. Если вы поставите изображение продукта по умолчанию-изображение::перед тем, как оно даст вам то, что вы хотите. Надеюсь, я смогу это объяснить. Я оставляю ссылку на код, чтобы вы могли удалить изображения в src и посмотреть, что происходит. https://codepen.io/atesirem/pen/poeZJWX

 .container {
         display: flex; 
         justify-content: flex-start;
}
.product {
         flex: 1;
         width: 100%;
         max-width:320px;
         height: 320px;
         background-color:red;
  z-index:1;
  
}
.product-photo {
         width: 100%;
         height: auto;
         position:relative;
         z-index:5;
}
.product-photo::before {
         width: 100%;
         min-height: 215px;
         content : "";
         position:absolute;
         top:0;
         left:0;
         background-image: url('https://images.unsplash.com/photo-1618469060682-b0487b7425db?crop=entropyamp;cs=tinysrgbamp;fit=maxamp;fm=jpgamp;ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMzEzNDIzNgamp;ixlib=rb-1.2.1amp;q=80amp;w=400');
          background-size: contain;
          background-position: center center;
          z-index: 1;
          background-repeat:no-repeat;
          
}
.product-photo > img {
         max-width: 100%;
         height: auto;
         object-fit: containt;
         z-index:5;
         position:relative;
}
.product-name {}