Create an image border when using object-fit: contain

I'm trying to create a 1px black border between two images that are sized using object-fit: contain: https://codepen.io/j2is/pen/baMagL The border height should match the image size.

The issue is elaborated on the article Image Decorations for Object Fit. I'm wondering if there is an svg filter that can achieve my goal? I tried a dropshadow on the left image using filter: drop-shadow(1px 0px 1px black) drop-shadow(1px 0px 1px black) but this creates an unwanted shadow on the top and bottom of the image.

1 answer

  • answered 2018-01-11 22:30 michael d

    I added a 1px border to the right of your left image to separate the two. Is that what you wanted?

    https://codepen.io/anon/pen/OzZvWy

    .gallery img
       border-right: 1px solid black
       display: block
       position: relative
       width: 100%
       height: 100%
       object-fit: contain