<分区>
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 Bootstrap 类和 row 类。 {{news->news_class}} 有 3 个值:small、normal 和 height。每个类都有不同的高度，180px、270px 和 450px。就像在我的照片中一样，第一张图片属于 small 类，这意味着它有 180px，第五张(第二行的第一张)属于 heigh 类，有 450px。如果某些图像具有其他值，我需要删除该空间。
最佳答案
图片的顺序重要吗？如果不是，我也会使用 Bootstrap 卡片列(Check Sumits 答案)。
用法:
<div class="card-columns">
@foreach($news as $news)
<div class="card">
//place news informations here
</div>
@endforeach
</div>
更多信息请访问 https://getbootstrap.com/docs/4.3/components/card/#card-columns
在我的例子中，我不能使用它们，因为我的元素的顺序很重要，Bootstrap 卡片列对元素的排序如下:
1 | 3 | 5
2 | 4 | 6
当我需要的时候:
1 | 2 | 3
4 | 5 | 6
这就是为什么我要使用 metafizzy 的同位素包:https://isotope.metafizzy.co/layout-modes/masonry.html .它允许您从不同的顺序中进行选择，还提供了筛选元素的选项。
关于html - 不同尺寸图像之间的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58798773/