时间戳

首页 > 解决方案 > 不同尺寸图像之间的空白

html - 不同尺寸图像之间的空白

问题描述

我有一些不同尺寸的不同图像，我需要擦除照片之间的空白。我怎样才能做到这一点？

这是我的问题： 在此处输入图像描述

这是我想做的（第一列）： 在此处输入图像描述

我的代码：

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;
 }
}

所以，这里我有col-md-3带类的引导row类。{{news->news_class}}有 3 个值：小、正常和高度。每个类都有不同的高度，180px、270px 和 450px。就像在我的照片中一样，第一张图片有small等级，这意味着它有 180 像素，第五张（第二行的第一张）有heigh等级，有 450 像素。如果某些图像具有其他值，我需要删除该空间。

标签： htmlcss

解决方案

我认为您可以使用display: flex，默认flex-direction为 row ，因此您无需担心。在每个子 div 中，您设置flex: 25%为 4 列、flex: 50%2 列和flex: 100%1 列。以下是示例代码，或者您可以访问此链接进行尝试。

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%;
  }
}

推荐阅读