Блог

Главная - Вопросы по программированию - как удалить лишнее пространство изображений в сетке

как удалить лишнее пространство изображений в сетке

#html #css #css-grid

Вопрос:

У меня есть группа изображений, чтобы быть сеткой. но вокруг них есть дополнительные пространства. я контролировал заполнение и поля ,изменения вертикального выравнивания и параметры блока отображения, но ни один из них, похоже, не является решением.

это изображение — то, что я получаю

[![Текущий результат][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>

Комментарии:

1. почему бы вам не использовать bootstrap flex, это поможет вам иметь аккуратную галерею

2. Можете ли вы проверить, удалили ли вы ссылку на изображение? Это было раньше, теперь этого нет

3. это не работает

Ответ №1:

Надеюсь, это может помочь

 <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.1amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=amp;auto=formatamp;fit=cropamp;w=967amp;q=80" align="left"/>
            </div>
            <div class="box b">
                <img src="https://images.unsplash.com/photo-1597910037283-e728413e079c?ixlib=rb-1.2.1amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=amp;auto=formatamp;fit=cropamp;w=1950amp;q=80" align="left"/>
            </div>
            <div class="box c">
                <img src="https://images.unsplash.com/photo-1526336179256-1347bdb255ee?ixlib=rb-1.2.1amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=amp;auto=formatamp;fit=cropamp;w=634amp;q=80" align="left"/>
            </div>
            <div class="box d">
                <img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=amp;ixlib=rb-1.2.1amp;auto=formatamp;fit=cropamp;w=1352amp;q=80" align="left"/>
            </div>
            </div>

Ответ №2:

пространство между столбцами из-за grid-template-columns: 1fr 2fr 3fr;

Fr-это дробная единица. Единица измерения Fr-это входное значение, которое автоматически вычисляет деления компоновки при корректировке зазоров внутри сетки.

запустите фрагмент кода и измените значения для вышеуказанного свойства, чтобы увидеть различные объемы пространства вокруг контейнеров.

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

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

.box {
  border-radius: 5px;}
.a {
  grid-column: 1;}
.b {
  grid-column: 3 ;
  grid-row: 1;}
.c {
  grid-column: 1 ;
  grid-row: 2 ;}
.d {
  grid-column: 2 ;
  grid-row: 2 ;} 
 <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">a
                <img src="../assets/images/آهن-770x480@2x.png" align="left"/>
            </div>
            <div class="box b">b
                <img src="../assets/images/89879@2x.png" align="left"/>
            </div>
            <div class="box c">c
                <img src="../assets/images/ahhann-2@2x.png" align="left"/>
            </div>
            <div class="box d">d
                <img src="../assets/images/images (5)@2x.png" align="left"/>
            </div>
            </div>
Метки: