After discovering a useful trick here to add an inset box-shadow on the images in my gallery, I encountered three challenges:
- Difficulty centering the image and surrounding anchor vertically and horizontally in their container
- Unable to limit the image height so it remains in the container as I can with max-width
- Shadow overflows slightly at the bottom of the image
Check out my current gallery without the box-shadow: https://jsfiddle.net/GaetanL/vLrt7o1m/17/
HTML:
<div class="gallery">
<div class="picture-frame">
<img src="https://static.passeportsante.net/i93408-.jpeg">
</div>
<div class="picture-frame">
<img src="https://www.wimadame.com/wp-content/uploads/2019/12/La-nature-me-parle.jpeg">
</div>
</div>
CSS:
body {
background-color: purple;
}
.gallery {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
}
.picture-frame {
display: flex;
background-color: white;
border-style: solid;
border-color: lightgrey;
box-shadow: 6px 6px 6px;
height: 200px;
width: 200px;
margin: 0 36px 36px 0;
padding: 12px;
border-width: 1px;
}
.picture-frame img {
max-width: 100%;
max-height: 100%; /* for chrome & firefox */
object-fit: contain; /* for edge */
margin: auto;
}
Here is my progress so far with the issues mentioned above: https://jsfiddle.net/GaetanL/07wmxe6a/24/
HTML:
<div class="gallery">
<div class="picture-frame">
<a class="img-shadow">
<img class="img-image" src="https://static.passeportsante.net/i93408-.jpeg">
</a>
</div>
<div class="picture-frame">
<a class="img-shadow">
<img class="img-image" src="https://www.wimadame.com/wp-content/uploads/2019/12/La-nature-me-parle.jpeg">
</a>
</div>
</div>
CSS:
body {
background-color: purple;
}
.gallery {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
}
.picture-frame {
background-color: white;
border-style: solid;
border-color: lightgrey;
box-shadow: 6px 6px 6px;
height: 200px;
width: 200px;
margin: 0 36px 36px 0;
padding: 12px;
border-width: 1px;
}
.img-shadow {
position: relative;
float: left;
}
.img-shadow::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0,0,0,.6);
-moz-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
}
.img-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
margin: auto;
}