All geek questions in one place

Lazy images of loading columns without overflow or lost fields

I saw corrections for individual parts of this problem, but not for a collective solution. I can solve everything without resorting to javascript formatting, with the exception of fields from elements wrapped to the top of the next column (I can’t understand why it wasn’t fixed, but it seems to be a bug in css3 for some time, hindering the layout layout 1 , 2 )

I have a flexible div container, divided into three columns (although this may vary depending on the page width, per responsive layout), spanning divs with a different number of attached images with different proportions, each of which has a difference - property. The above problem is very obvious, so I am looking for a solution to this.

Typically, a sentence involves using a property column-break-inside: avoid;along with switching my margin-bottomto padding-bottom. This hack has seen some success with others, and it is here that I point you to the subject of my question. I cannot implement this because I use a separate hack to prevent reloading of uploaded images (using lazy sizes plugin *) into columns ( padding-bottomlike hack, 3 relation ).

So, if I use padding-bottom to make sure my column elements are aligned without lost fields, I lose the ability to correct the overflow from lazy loading elements into columns. I cannot use fixed-size elements because the layout of the column is responsive and the elements are compressed and dynamically expanded with the size of the column.

Is there anyone who managed to solve both problems simultaneously without javascript formatting?

I try to stick with this particular lazy download plugin for reasons beyond the scope of this problem.

HTML code:

<div id='columncontainer'>
    <div class='imagecontainer' style='padding-bottom:reflowPaddingAmountFromPHPvar;'>
        <img class='lazyload'>
        <div class='imagetextcontainer'>
            <div class='vertaligncontainer'>
                <p class='imagename'>Text</p>
                <p class='imagedesc'>Text</p>
            </div>
        </div>
    </div>
</div>

CSS code:

#myContent  {
    position: relative;
    width: 100%;
    column-count: 3;
    column-gap: 20px;
    column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -webkit-column-break-inside:avoid;
}

.imagecontainer {
    position: relative;
    margin-bottom: 20px;
    img {
        position: absolute;
        top: 0;
        left: 0;
        height: auto;
        width: 100%;
    }
}

JsFiddle example:

https://jsfiddle.net/g0yjd9ov/1/

, - (imagecontainer) , , margin-top . , - . , (, . ). , , .

+4
3

, . (.imagecontainer) , . . , .

, , , . , , , , ( , ).

, -. , , . , , , . , .imagetextcontainer, .

JSFiddle. .

#columncontainer  {
  width: 100%;
  column-count: 3;
  column-gap: 10px;
}

.block-wrap {
  width: 100%;
  padding-bottom: 10px;
  
  /* prevent column breaks in item
  * /questions/34311/how-to-prevent-column-break-within-an-element/250202#250202 */
  -webkit-column-break-inside: avoid; /* Chrome, Safari */
  page-break-inside: avoid;           /* Theoretically FF 20+ */
  break-inside: avoid-column;         /* IE 11 */
  display:table;                      /* Actually FF 20+ */
}

.block {
  width: 100%;
  background-color: #ffff7f;
}

.block > p {
  margin: 0;
  padding: 10px;
}

.imagecontainer {
  position: relative;
  width: 100%;
  height: 0;
  background-color: #a00;
}

.imagecontainer > img {
  width: 100%;
}

.imagetextcontainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<script src="https://afarkas.imtqy.com/lazysizes/lazysizes.min.js"></script>

<div id='columncontainer'>

  <div class="block-wrap">
    <div class="block">
      <div class='imagecontainer' style='padding-bottom: 50%;'>
        <img class='lazyload'
             data-sizes='auto'
             data-srcset='https://placehold.it/100x50/a00/fff  100w,
                          https://placehold.it/200x100/050/fff 200w,
                          https://placehold.it/400x200/057/fff 400w' />
        <div class='imagetextcontainer'>
          <div class='vertaligncontainer'>
            <p class='imagename'>Name</p>
            <p class='imagedesc'>Description</p>
          </div>
        </div>
      </div>
      <p>Some text. Followed by another figure.</p>
      <div class='imagecontainer' style='padding-bottom: 100%;'>
        <img class='lazyload'
             data-sizes='auto'
             data-srcset='https://placehold.it/100x100/a00/fff 100w,
                          https://placehold.it/200x200/050/fff 200w,
                          https://placehold.it/400x400/057/fff 400w' />
        <div class='imagetextcontainer'>
          <div class='vertaligncontainer'>
            <p class='imagename'>Name</p>
            <p class='imagedesc'>Description</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="block-wrap">
    <div class="block">
      <div class='imagecontainer' style='padding-bottom: 50%;'>
        <img class='lazyload'
             data-sizes='auto'
             data-srcset='https://placehold.it/100x50/a00/fff  100w,
                          https://placehold.it/200x100/050/fff 200w,
                          https://placehold.it/400x200/057/fff 400w' />
        <div class='imagetextcontainer'>
          <div class='vertaligncontainer'>
            <p class='imagename'>Name</p>
            <p class='imagedesc'>Description</p>
          </div>
        </div>
      </div>
      <p>Some text. No figure here.</p>
    </div>
  </div>

  <div class="block-wrap">
    <div class="block">
      <p>Only text here.</p>
    </div>
  </div>

  <div class="block-wrap">
    <div class="block">
      <div class='imagecontainer' style='padding-bottom: 50%;'>
        <img class='lazyload'
             data-sizes='auto'
             data-srcset='https://placehold.it/100x50/a00/fff  100w,
                          https://placehold.it/200x100/050/fff 200w,
                          https://placehold.it/400x200/057/fff 400w' />
        <div class='imagetextcontainer'>
          <div class='vertaligncontainer'>
            <p class='imagename'>Name</p>
            <p class='imagedesc'>Description</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="block-wrap">
    <div class="block">
      <div class='imagecontainer' style='padding-bottom: 100%;'>
        <img class='lazyload'
             data-sizes='auto'
             data-srcset='https://placehold.it/100x100/a00/fff 100w,
                          https://placehold.it/200x200/050/fff 200w,
                          https://placehold.it/400x400/057/fff 400w' />
        <div class='imagetextcontainer'>
          <div class='vertaligncontainer'>
            <p class='imagename'>Name</p>
            <p class='imagedesc'>Description</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="block-wrap">
    <div class="block">
      <p>Only text here.</p>
      <p>Tow lines now.</p>
    </div>
  </div>

  <div class="block-wrap">
    <div class="block">
      <div class='imagecontainer' style='padding-bottom: 200%;'>
        <img class='lazyload'
             data-sizes='auto'
             data-srcset='https://placehold.it/100x200/a00/fff 100w,
                          https://placehold.it/200x400/050/fff 200w,
                          https://placehold.it/400x800/057/fff 400w' />
        <div class='imagetextcontainer'>
          <div class='vertaligncontainer'>
            <p class='imagename'>Name</p>
            <p class='imagedesc'>Description</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
Hide result
+1

, CSS. , , .
1 - ( )
2 - ( )

:, , ( ) , .imagecontainer div, . ( , ) column-break-inside , . : https://jsfiddle.net/36pqdkd3/6/

0

, flex-box

HTML

<div id='columncontainer'>

    <div class='imagecontainer'>
        <img class='lazyload'>
        <div class='imagetextcontainer'>
            <div class='vertaligncontainer'>
                <p class='imagename'>Text</p>
                <p class='imagedesc'>Text</p>
            </div>
        </div>
    </div>

    <div class='imagecontainer'>
        <img class='lazyload'>
        <div class='imagetextcontainer'>
            <div class='vertaligncontainer'>
                <p class='imagename'>Text</p>
                <p class='imagedesc'>Text</p>
            </div>
        </div>
    </div>

    <div class='imagecontainer'>
        <img class='lazyload'>
        <div class='imagetextcontainer'>
            <div class='vertaligncontainer'>
                <p class='imagename'>Text</p>
                <p class='imagedesc'>Text</p>
            </div>
        </div>
    </div>

    <div class='imagecontainer' style=''>
        <img class='lazyload'>
        <div class='imagetextcontainer'>
            <div class='vertaligncontainer'>
                <p class='imagename'>Text</p>
                <p class='imagedesc'>Text</p>
            </div>
        </div>
    </div>


</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#columncontainer  {
    position: relative;
    width: 100%;
    display: flex;
    height: 40%;
    /* use this if you want containter wrapping
    flex-wrap: wrap; */
    /* use this if you want container scrolling
    overflow: auto; */
    /* use this if you want container scrolling
    justify-content: center; */ 
}

.imagecontainer {
    min-width: 250px;
    position: relative;
    background-color: red;
    overflow: hidden;
    height: 100%;
    margin: 5px;
    z-index: 1;
}

jsfiddle

, .

, .

html body 100% .

,


, px vw/vh ( DOM). min/max/width, . ( 1: 2)

element {
  min-width: 10vw;
  min-height: 20vh;
  width: 50px;
  height: 100px;
}

css ".imagecontainer".

-1
source

Source: https://habr.com/ru/post/1672396/

More articles:


All Articles