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!
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>
3
Answers
Easy enough to do this with Flexbox or Grid, but Grid is nicer, as it doesn’t have stragglers resized at the end.
Here’s a quick Grid demo (tweak as needed):
Here’s a quick Flexbox demo:
As @ralph.m said in the comments on the question, only the direct children of the flex container are flex items, so once you wrap an anchor element around an image, the anchor becomes the flex item instead of the image.
However, if you apply the style
display: contentsto the anchor element, that element is ‘removed’ from the display hierarchy and its child elements (the image) effectively move up a level in the hierarchy (so the image will become the flex item again).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.
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.Additionally, the majority of your CSS declarations are unnecessary, including
heightandcalc()Furthermore, the CSS can be greatly simplified by using CSS Grid instead of Flexbox