Check out my current style:
.album-photos-container {
position: relative;
display: flex;
flex-flow: wrap;
justify-content: center;
.image-card-small {
width: 48%;
margin: 4px;
filter: brightness(0.8);
img {
width: 100%;
height: 100%;
max-height: 400px;
}
}
}
This is how it appears with distorted images.
https://i.sstatic.net/13vd0.jpg
I've been exploring display: flex; and flex-flow: wrap; and it seems like they're causing the issue. I might need a different approach.
I attempted to increase the max-height: 400px; to 2000, resulting in this:
https://i.sstatic.net/Fgpsx.jpg
Please give me some advice: I want the images to fill the box regardless of their dimensions!
UPDATE
Here's the component code:
import React from 'react'
const ClickablePhoto = (props) => {
return (
<div onClick={props.onClick} className="image-card-small">
<img src={props.src} id={props.id} alt="album" />
</div>
)
}
export default ClickablePhoto
I also tried this alternative approach:
return (
<div onClick={props.onClick} style={{backgroundImage: 'url(' + require(`${props.src}`) + ') background-size: cover'} } >
<img src={props.src} id={props.id} alt="album" />
</div>
)
However, the image source from the props looks like this:
/static/media/0_sJ1A5jGwSm66KCdV.e2451a3a.pngbackground-image: url.