-1

I have a large image horizontally centered inside a smaller div, I referenced this post to get it properly centered, regardless of image size posted on the feed.

One issue though, I still need the smallest dimension, whether height or width (and it differs from each image posted), to fit flush into the div. Overflow should be hidden on the larger dimension.

Using max-height or max-width doesn't fix the opposite dimention, and none of the object-fit values have worked so far. If javascript is necessary, I will take that route. However, just curious if there's some magic CSS solution.

The code I have so far fits a landscape image perfectly centered horizontally, flush to the top and bottom of the div. But if a portrait image is posted, it shrinks the picture to fit the height, leaving gaps on the sides.

I would remove height:100%, but when I do that, it screws with the horizontal orientation.

.photo {
    position:relative;
    overflow:hidden;
    text-align:center;
}

.photo img {
    position:absolute;
    height:100%;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin:auto auto;
}
Community
  • 1
  • 1
chill8888
  • 37
  • 5
  • Your question isn't very specific. Try describing your issue more and if possible, post some code! – nmg49 Nov 03 '16 at 03:22
  • Sorry about that. I figured the link would explain what I was trying to do. Is it better now? – chill8888 Nov 05 '16 at 23:50

1 Answers1

0

Got it to work with a very simple solution! Just had to set height AND width to 100%, which seemed counter-intuitive; but with the object-fit value "cover" it automatically trims the image overflow.

Keep in mind this is not a solution for IE, only FF36+, Chrome31+, etc.

.photo {
    position:relative;
    overflow:hidden;
    text-align:center;
}

.photo img {
    position:absolute;
    object-fit:cover;
    height:100%;
    width:100%;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin:auto auto;
}
chill8888
  • 37
  • 5