How to stop links from resizing my images?

June 16, 2022

I want my images to be links, but when I put them inside <a> tags, it shrinks a bit, which I wouldn’t like to happen.

My code:

.container{
    display: flex;
    margin-top: 30px;
    justify-content: center;
}

.partner{
    height: 100px;
    display: flex;
    flex: 1;
    justify-content: center;
    float: left;
    width: 25%;
}

.partner img{
    object-fit: contain;
    height: 100px;
    max-height: 100px;
    width: auto;
    max-width: 65% !important;
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
  }

<div class="container">
                <div class="col-3 partner"><a href="#" target="_blank" rel="noopener noreferrer"><img src="https://preview.redd.it/0yfcru3fnv591.jpg?width=640&crop=smart&auto=webp&s=3efaa93538888a691b5aec48e625808a054723a7" alt=""></a></div>
                <div class="col-3 partner"><img src="https://preview.redd.it/k17jbglh6w591.jpg?width=640&crop=smart&auto=webp&s=6d67b3f089bf5ade00aed2e870ba85a3cca8c192" alt=""></div>
                <div class="col-3 partner"><img src="https://preview.redd.it/otg0pq6ywt591.jpg?width=640&crop=smart&auto=webp&s=a44deb1f27a510ee6957d780c204e6827b401012" alt=""></div>
                <div class="col-3 partner"><img src="https://preview.redd.it/03yhd14gbs591.jpg?width=640&crop=smart&auto=webp&s=263ed6ecf41d50d51b8c6f6fa84923b0a0d57180" alt=""></div>
</div>

As you see I currently don’t have any styling for a, but I have tried some, display: inline-block; didn’t work in any context, and setting all: none; or all: inherit; on a also did nothing.

>Solution :

You need to set .partner a to have similar properties as .partner as the a tag wouldn’t have properties such as display: flex, then you need to create the same selector as .partner img but inside that a tag, so .partner a img.

I think, in general, the better approach is to put every image inside the a tag, and just disable the linking for the images that do not link to anywhere for less code duplication.

.container {
  display: flex;
  margin-top: 30px;
  justify-content: center;
}

.partner {
  height: 100px;
  display: flex;
  flex: 1;
  justify-content: center;
  float: left;
  width: 25%;
}

.partner img {
  object-fit: contain;
  height: 100px;
  max-height: 100px;
  width: auto;
  max-width: 65% !important;
}

.partner a {
  all: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
  justify-content: center;
  float: left;
}

.partner a img {
  object-fit: contain;
  height: 100px;
  max-height: 100px;
  width: auto;
  max-width: 65% !important;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

<div class="container">
  <div class="col-3 partner">
    <a href="#" target="_blank" rel="noopener noreferrer"><img src="https://preview.redd.it/0yfcru3fnv591.jpg?width=640&crop=smart&auto=webp&s=3efaa93538888a691b5aec48e625808a054723a7" alt=""></a>
  </div>
  <div class="col-3 partner"><img src="https://preview.redd.it/k17jbglh6w591.jpg?width=640&crop=smart&auto=webp&s=6d67b3f089bf5ade00aed2e870ba85a3cca8c192" alt=""></div>
  <div class="col-3 partner"><img src="https://preview.redd.it/otg0pq6ywt591.jpg?width=640&crop=smart&auto=webp&s=a44deb1f27a510ee6957d780c204e6827b401012" alt=""></div>
  <div class="col-3 partner"><img src="https://preview.redd.it/03yhd14gbs591.jpg?width=640&crop=smart&auto=webp&s=263ed6ecf41d50d51b8c6f6fa84923b0a0d57180" alt=""></div>
</div>