How to remove the padding from an image after the image's width changes?-CodePudding

My goal is too create a small gallery of pictures but when I shrink the size of the image with CSS using width: 15px, the space between the columns stays the same making the images very spread out instead of making the container smaller

.gallery-dog-img {
  max-height: 100%;
  max-width: 100%;
  cursor: pointer;
  width: 50px;
  padding-left:0;
  padding-right:0;

  }

.gallery{
  padding: 3px 3px;
  margin: 5px 5px;
}

.dog-cell {
  padding-right:0;
  padding-left:0;
}

<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<section >
  <div >
    <div >
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="{% static '/images/home_dog_carousel/dog4.jpeg' %}" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
    </div>
  </div>
</section>

Is there a way to make the container smaller to better fit the smaller size or remove the padding left over from the image's original size?

CodePudding user response：

This type of thing will often happen in Bootstrap when adding additional CSS that relates to layout. Mostly because Bootstrap has it all pre-written and by adding more we're interferring with it more than anything else.

I think you should try Bootstrap gutter (link below).

g-1 is added to the first line but you can use g-0 to g-5

<div >
   <div >
      <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
   </div>
   <div >
      <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
   </div>
</div>

Gutters --> https://getbootstrap.com/docs/5.0/layout/gutters/

CodePudding user response：

As I understood, you want to keep the pics small and reduce the gaps between the columns to show a grid-like pattern.

The bootstrap containers work well with responsive images scaling them according to the cell-size. Since you don't want your images to scale, you have to reduce the width of the container, e.g. by choosing fit-content or a size other than the original 100%. To do that you have to overwrite the original boostrap CSS by adding !important to your CSS changes. Just be careful with the use of !important because it can get quite messy if you lose track of the overwritten parts.

To handle the gaps between the columns and rows, you can easily use the BS gutter-classes, e.g. g-3.

.gallery{
  padding: 3px 3px;
  margin: 5px 5px;
}
.dog-gallery-container{
  width: fit-content !important;
}
.dog-cell {
  padding-right:0 !important;
  padding-left:0 !important;
}
.gallery-dog-img {
  max-height: 100%;
  max-width: 100%;
  cursor: pointer;
  width: 50px;
  padding-left:0;
  padding-right:0;

  }

<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<section >
  <div >
    <div >
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="{% static '/images/home_dog_carousel/dog4.jpeg' %}" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
    </div>
  </div>
</section>