0

I have some different images with different dimensions, and I need to erase that blank space between photos. How can I do that?

Here is my problem: enter image description here

Here is what I wanted to do(first column): enter image description here

My codes:

HTML

<div class="news-pc">
         <div class="row" style="margin-right: 140px; margin-left: 120px">
         @foreach($news as $news)
         @if($newsC > 4)
        @if($news->news_class == 'height')
          <div class="col-md-3" style="padding-right: 0px;margin-bottom: 40px;line-height: 0;">

           <a href="{{ url('news') }}/{{ $news->slug }}">
             <div class="element transition {{ $news->slug }} editorial news video-exhibition" style="width: 100%">
               <div class="item-gallery {{ $news->news_class }}">
                 <div class="content-item">
                    <div class="img__wrap">
                      <img class="img__img my-image" src="{{ url('images/news') }}/{{ $news->image }}" />
                      <div class="img__description_layer">

                        <p class="img__description" style="float: left;font-size: 1.84615em;font-style: italic">
                          {{ $news->title }}</p>
                      </div>
                    </div>

                    <div class="text">
                        <div class="name"></div>
                        <div class="content-gallery-grid">
                           <h3 class="title">
                             <!-- <a href="{{ url('news') }}/{{ $news->slug }}"> -->

                             <!-- </a> -->
                           </h3>
                        </div>
                    </div>
                 </div>
               </div>
            </div>
           </a>
         </div>
         @elseif($news->news_class == 'normal')
         <div class="col-md-3 contentWrap" id="column1" style="padding-right: 0px;margin-bottom: 40px;line-height: 0;">
          <a href="{{ url('news') }}/{{ $news->slug }}">
            <div class="element transition {{ $news->slug }} editorial news video-exhibition" style="width: 100%">
              <div class="item-gallery {{ $news->news_class }}">
                <div class="content-item">
                   <div class="img__wrap2">
                     <img class="img__img my-image" src="{{ url('images/news') }}/{{ $news->image }}" style="width: 268px; height: 270px"/>
                     <div class="img__description_layer">

                       <p class="img__description" style="float: left;font-size: 1.84615em;font-style: italic">
                         {{ $news->title }}</p>
                     </div>
                   </div>

                   <div class="text">
                       <div class="name"></div>
                       <div class="content-gallery-grid">
                          <h3 class="title">
                            <!-- <a href="{{ url('news') }}/{{ $news->slug }}"> -->

                            <!-- </a> -->
                          </h3>
                       </div>
                   </div>
                </div>
              </div>
           </div>
          </a>
        </div>
        @elseif($news->news_class == 'small')
        <div class="col-md-3 contentWrap" id="column1" style="padding-right: 0px;margin-bottom: 40px;line-height: 0;">
         <a href="{{ url('news') }}/{{ $news->slug }}">
           <div class="element transition {{ $news->slug }} editorial news video-exhibition" style="width: 100%">
             <div class="item-gallery {{ $news->news_class }}">
               <div class="content-item">
                  <div class="img__wrap3">
                    <img class="img__img my-image" src="{{ url('images/news') }}/{{ $news->image }}" style="width: 268px; height: 180px" />
                    <div class="img__description_layer">

                      <p class="img__description" style="float: left;font-size: 1.84615em;font-style: italic">
                        {{ $news->title }}</p>
                    </div>
                  </div>

                  <div class="text">
                      <div class="name"></div>
                      <div class="content-gallery-grid">
                         <h3 class="title">
                           <!-- <a href="{{ url('news') }}/{{ $news->slug }}"> -->

                           <!-- </a> -->
                         </h3>
                      </div>
                  </div>
               </div>
             </div>
          </div>
         </a>
       </div>
       @endif
         @endif
            @endforeach
          </div>
        </div>

CSS:

.my-image{
     content: '';
     width: 268px;
     height: 470px;
     object-fit: cover;
     top: 0;
     left: 0;
     background: rgba(0,0,0,.3);
     z-index: 1;

}
/* relevant styles */
.img__wrap {
 position: relative;
 width: 268px;
 height: 470px;
}
@media only screen and (max-width: 800px){
    .img__wrap {
     position: relative;
     width: 384px;
     height: 450px;
    }
}

.img__wrap2 {
 position: relative;
 width: 268px;
 height: 270px;
}

@media only screen and (max-width: 800px){
    .img__wrap2 {
     position: relative;
     width: 384px;
     height: 330px;
    }
}
.img__wrap3 {
 position: relative;
 width: 268px;
 height: 180px;
}
@media only screen and (max-width: 800px){
    .img__wrap3 {
     position: relative;
     width: 384px;
     height: 180px;
    }
}
.img__description_layer {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(0,0,0,.3);
 color: #fff;
 visibility: hidden;
 opacity: 0;
 display: flex;
 align-items: center;
 justify-content: center;

 /* transition effect. not necessary */
 transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description_layer {
 visibility: visible;
 opacity: 1;
}
@media only screen and (max-width: 800px){
    .img__wrap:hover .img__description_layer {
     visibility: visible;
     opacity: 1;
    }
}
.img__wrap2:hover .img__description_layer {
 visibility: visible;
 opacity: 1;
}

@media only screen and (max-width: 800px){
    .img__wrap2:hover .img__description_layer {
     visibility: visible;
     opacity: 1;
     top: 35px;
    }
}
.img__wrap3:hover .img__description_layer {
 visibility: visible;
 opacity: 1;
}
@media only screen and (max-width: 800px){
    .img__wrap3:hover .img__description_layer {
     visibility: visible;
     opacity: 1;
    }
}

.img__description {
 transition: .2s;
 transform: translateY(1em);
}
@media only screen and (max-width: 800px){
    .img__wrap:hover .img__description {
     transform: translateY(0);
    }
}
.img__wrap:hover .img__description {
 transform: translateY(0);
}
.img__wrap2:hover .img__description {
 transform: translateY(0);
}
@media only screen and (max-width: 800px){
    .img__wrap2:hover .img__description {
     transform: translateY(0);
    }
}
.img__wrap3:hover .img__description {
 transform: translateY(0);
}
@media only screen and (max-width: 800px){
    .img__wrap3:hover .img__description {
     transform: translateY(0);
    }
}

@media only screen and (max-width: 800px) {
 .news-pc{
     display: none;
 }
}

So, here I have col-md-3 bootstrap class with row class. {{news->news_class}} has 3 values : small, normal and height. Every class has a different height, 180px, 270px and 450px. Like in my photo, first image has small class, which means it has 180px, and the fifth ( first of the second row) has heigh class, with 450px. I need to erase that space if some images has other values.

Andrew
  • 404
  • 4
  • 14

2 Answers2

1

I think you can use display: flex, the default flex-direction is row so you don't need to worry about it. In each child div, you set flex: 25% for 4 columns, flex: 50% for 2 columns and flex: 100% for 1 column. Below is the example code or you can access this link to try it.

HTML

<div class="header">
    <h1>Responsive Image Grid</h1>
    <p>Resize the browser window to see the responsive effect.</p>
</div>
<div class="row">
    <div class="column">
        <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/falls2.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/mist.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
    </div>
    <div class="column">
        <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/ocean.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/mountainskies.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
    </div>
    <div class="column">
        <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/falls2.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/mist.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
    </div>
    <div class="column">
        <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/ocean.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/mountainskies.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
        <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
    </div>
</div>

CSS

* {
box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
Number_43
  • 19
  • 3
1

Is the order of the images important? If not I would go with Bootstrap card columns too (Check Sumits answer).

Usage:

<div class="card-columns">
  @foreach($news as $news)
    <div class="card">
       //place news informations here
    </div>
  @endforeach
</div>

More informations at https://getbootstrap.com/docs/4.3/components/card/#card-columns

In my case I couldn't use them because the order of my items is important and Bootstrap card columns orders the items like:

1 | 3 | 5

2 | 4 | 6

while I need:

1 | 2 | 3

4 | 5 | 6

That's why I am going with the isotope package by metafizzy: https://isotope.metafizzy.co/layout-modes/masonry.html. It allows u to choose from diffrent orderings and also gives the option to filter items.

tbs
  • 139
  • 9