时间戳

首页 > 解决方案 > 如何删除网格上图像的额外空间

html - 如何删除网格上图像的额外空间

问题描述

我有一组图像要网格。但他们周围有额外的空间。我控制了填充和边距，垂直对齐更改和显示块选项，但它们似乎都不是解决方案。

这张图片是我得到的

[![当前结果][1]][1]

.event-container{
margin-top: 10%;}

.event-img-wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;}

.box {
  border-radius: 5px;}
.a {
  grid-column: 1 / span 2;}
.b {
  grid-column: 3 ;
  grid-row: 1 / span 2;}
.c {
  grid-column: 1 ;
  grid-row: 2 ;}
.d {
  grid-column: 2 ;
  grid-row: 2 ;
   width: 10%;}
.a img{
  max-width: 600px;}
.b img{
  max-width: 400px; }
.c img{
  max-width: 300px;}
.d img{
  max-width: 350px;}
<div class="container event-container">
            <div class="col-12 col-md-12 col-sm-1">
                <span class="services-title">
                        گروه بزرگ کاوه استیل </p>
                </span>
            </div>
            <div class="event-img-wrapper">
              
            <div class="box a">
                <img src="../assets/images/آهن-770x480@2x.png" align="left"/>
            </div>
            <div class="box b">
                <img src="../assets/images/89879@2x.png" align="left"/>
            </div>
            <div class="box c">
                <img src="../assets/images/ahhann-2@2x.png" align="left"/>
            </div>
            <div class="box d">
                <img src="../assets/images/images (5)@2x.png" align="left"/>
            </div>
            </div>

标签： htmlcsscss-grid

解决方案

希望，这可以帮助

<style>
.event-img-wrapper {
    display: grid;
    grid-column-gap: 0;
    grid-row-gap: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(8, 22vw);
}

  .event-container{
    margin-top: 10%;
  }


  .box {
    border-radius: 5px;
    overflow: hidden;
  }
  .a {
    grid-column: 1;
  }
  .b {
    grid-column: 2;
  }
  .c {
    grid-column: 3;
    grid-row: 1;
  }
  .d {
    grid-column: 1;
    width: 100%;
  }
</style>


<div class="container event-container">
            <div class="col-12 col-md-12 col-sm-1">
                <span class="services-title">
                        گروه بزرگ کاوه استیل </p>
                </span>
            </div>
            <div class="event-img-wrapper">
              
            <div class="box a">
                <img src="https://images.unsplash.com/photo-1452827073306-6e6e661baf57?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=967&q=80" align="left"/>
            </div>
            <div class="box b">
                <img src="https://images.unsplash.com/photo-1597910037283-e728413e079c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80" align="left"/>
            </div>
            <div class="box c">
                <img src="https://images.unsplash.com/photo-1526336179256-1347bdb255ee?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=634&q=80" align="left"/>
            </div>
            <div class="box d">
                <img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" align="left"/>
            </div>
            </div>

推荐阅读