Search code examples
htmlcssimageflexboxcss-grid

images in grid resize when putting images inside anchor tags

I have a responsive (amount of columns change when device width changes) grid layout. Initially works as I want it to but cannot make images clickable. For making images clickable, I want to put them inside anchor tags to link to some subdomain. However, when I do this (surround images in anchor tags, or any other tags for that matter such as div) these images resize/seem to not follow the CSS styles I set for these images anymore. I don't know why. Please see Codepen and image below. Any input appreciated!

screenshot of issue Smaller images on bottom right are the ones with the anchor tags around them

Codepen (note: last two images in the grid are with anchor tags)

I don't understand why putting <a> tags around the images would make my CSS selector .photos img not work anymore, since I thought this selector is for all img elements inside the div with class 'photos' and the images in the grid are still inside the .photos div. Perhaps somehow the anchor elements are overriding (part of) my CSS styles and causing the image to resize in that way? Is this true and if so how can I prevent this resize whilst making the image clickable (surrounded in anchor tags)?

* {
  box-sizing: border-box;
}

#imageTextGrid {
  width: 100vw;
  margin: 0;
  margin-right: 0;
  /* display: flex; */
}

.photos {
  display: flex;
  /* background-color: #000; */
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  padding: 0;
  max-width: 100vw;
}

.photos img {
  display: block;
  float: left;
  flex: 0 0 auto;
  padding: .35vw;
  background-color: #fff;
}

@media screen and (min-width: 1024px) {
  .photos img {
    width: calc(100%/3);
    height: calc(100%/3);
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .photos img {
    width: calc(100%/2);
    height: calc(100%/2);
  }
}

@media screen and (min-width: 50px) and (max-width: 768px) {
  .photos img {
    width: calc(100%/1);
    height: calc(100%/1);
  }
}
<div id="imageTextGrid">
  <div class="photos">
    <!-- <img class="thumbnailImg" src="img/about page 1/proj_thumnails/1_apeldoorn.PNG" /> -->
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <a><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
    <a><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
  </div>
</div>

Solution

  • The reason why the images resize when placed inside of anchor tags is because you have declared the image size to be a percentage, which is a percentage of the parent element's size.

    .photos img {
  width: calc(100%/3);
  height: calc(100%/3);
}


    To resolve this issue, declare width: 100% when the images are inside anchors (the selector has higher specificity) and include the anchor in the selector for calculating the image widths.

    .photos a img {
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .photos a,
  .photos img {
    width: calc(100%/3);
    height: calc(100%/3);
  }
}


    * {
  box-sizing: border-box;
}

#imageTextGrid {
  width: 100vw;
  margin: 0;
  margin-right: 0;
  /* display: flex; */
}

.photos {
  display: flex;
  /* background-color: #000; */
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  padding: 0;
  max-width: 100vw;
}

.photos img {
  display: block;
  float: left;
  flex: 0 0 auto;
  padding: .35vw;
  background-color: #fff;
}

.photos a img {
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .photos a,
  .photos img {
    width: calc(100%/3);
    height: calc(100%/3);
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .photos a,
  .photos img {
    width: calc(100%/2);
    height: calc(100%/2);
  }
}

@media screen and (min-width: 50px) and (max-width: 768px) {
  .photos a,
  .photos img {
    width: calc(100%/1);
    height: calc(100%/1);
  }
}
    <div id="imageTextGrid">
  <div class="photos">
    <!-- <img class="thumbnailImg" src="img/about page 1/proj_thumnails/1_apeldoorn.PNG" /> -->
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <a><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
    <a><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
  </div>
</div>



    Additionally, the majority of your CSS declarations are unnecessary, including height and calc()

    * {
  box-sizing: border-box;
}

.photos {
  display: flex;
  flex-wrap: wrap;
}

.photos img {
  padding: .35vw;
}

.photos a img {
  width: 100%;
}

@media (min-width: 1024px) {
  .photos a,
  .photos img {
    width: calc(100%/3);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .photos a,
  .photos img {
    width: 50%;
  }
}

@media (min-width: 50px) and (max-width: 768px) {
  .photos a,
  .photos img {
    width: 100%;
   }
}
    <div id="imageTextGrid">
  <div class="photos">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <a><img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg"></a>
    <a><img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg"></a>
  </div>
</div>



    Furthermore, the CSS can be greatly simplified by using CSS Grid instead of Flexbox

    * {
  box-sizing: border-box;
}

.photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: .35vw;
}

.photos img {
  width: 100%;
}
    <div id="imageTextGrid">
  <div class="photos">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <a><img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg"></a>
    <a><img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg"></a>
  </div>
</div>