I am have this HTML/CSS gallery using flexbox.
@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
:root {
--magnifier: 6;
--gap: 1vmin;
--transition: 0.5s;
}
.gallery {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap);
}
.child {
transition: flex var(--transition), filter var(--transition);
height: 100%;
flex: 1;
}
.child:hover {
flex: var(--magnifier);
}
img {
--brightness: 0.85;
--grayscale: 1;
height: 100%;
filter: grayscale(var(--grayscale)) brightness(var(--brightness));
object-fit: cover;
overflow: hidden;
}
img:hover {
--brightness: 1;
--grayscale: 0;
}<div class="gallery">
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/7604425/pexels-photo-7604425.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/4666748/pexels-photo-4666748.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/4932184/pexels-photo-4932184.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/4210900/pexels-photo-4210900.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/3126574/pexels-photo-3126574.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/1376201/pexels-photo-1376201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/2437291/pexels-photo-2437291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/1679772/pexels-photo-1679772.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/1183099/pexels-photo-1183099.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/1813513/pexels-photo-1813513.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/931018/pexels-photo-931018.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
</div>https://codepen.io/royfrancis/pen/LYawRax
The portrait images have empty space when hovering. I was hoping object:cover would fill it up but it doesn’t quite work. What is the best way to fill up the empty space?
2
Answers
<a>and<img>also need to bewidth:100%andheight:100%;In order for
object-fitto work, you need to style your image elements with a definite width and height. Yours have a definite height, but you have not specified a width. In the absence of definite dimensions, all the browser has to work with are the intrinsic dimensions of the source image.As per @Shuo’s answer, in your design your
.childdivs have their widths determined by the flexbox.gallery, so their widths are definite. But neither the anchor element nor the image element inside them have been assigned a width. Set the width of both to 100% and your problem will be solved.