.no-image { background: url('/assets/images/no-image.jpg') no-repeat center center #FFF; background-size: contain; } .categories { float: left; width: 23%; } 
 <div class="categories no-image" style=" background: url('http://pir.uborka25.ru/assets/img/sets/035nb-zhivi-yarko.jpg') no-repeat; background-size: contain; margin: 1%; "> <div class="categories-dark"> <span class="hint">C ΠΊΡ€Π΅ΠΌΠΎΠΌ</span> <div class="link-category"> <a href="kapkeyki /s-kremom/" title="ΠšΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ ΠΊΠ°ΠΏΠΊΠ΅ΠΉΠΊΠΈ с ΠΊΡ€Π΅ΠΌΠΎΠΌ">Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ </a> </div> </div> </div>

It is necessary that the height of the block depends on the height of the image for a given width. On pure css, js, the implementation is already there (

    2 answers 2

    here you have to insert a real picture, css-th is not done

    • I will note how correct it is, even the very same sad thoughts) - Vyacheslav Potseluyko

    Not quite understood, but maybe one of two things will do.

     .no-image-1 { background: url('http://pir.uborka25.ru/assets/img/sets/035nb-zhivi-yarko.jpg'); background-size: cover; min-height: 400px; } .categories { float: left; width: 23%; } .no-image-2 { background: url('http://pir.uborka25.ru/assets/img/sets/035nb-zhivi-yarko.jpg'); background-size: cover; } 
     <div class="categories no-image-1"> <div class="categories-dark"> <span class="hint">C ΠΊΡ€Π΅ΠΌΠΎΠΌ</span> <div class="link-category"> <a href="kapkeyki /s-kremom/" title="ΠšΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ ΠΊΠ°ΠΏΠΊΠ΅ΠΉΠΊΠΈ с ΠΊΡ€Π΅ΠΌΠΎΠΌ">Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ </a> </div> </div> </div> <div class="categories no-image-2"> <div class="categories-dark"> <span class="hint">C ΠΊΡ€Π΅ΠΌΠΎΠΌ</span> <div class="link-category"> <a href="kapkeyki /s-kremom/" title="ΠšΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ ΠΊΠ°ΠΏΠΊΠ΅ΠΉΠΊΠΈ с ΠΊΡ€Π΅ΠΌΠΎΠΌ">Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ </a> </div> </div> </div>

    • unfortunately not that (Look: I set the width in percent, and I need the height of the block to be equal to the FULL height of the picture, with a width of a given number of percent - Vyacheslav Potseluyko
    • I think the example on the left no-image-1 suits you, it contains the minimum height of min-height: 400px equal to the height of the image. - stackanon