Zooming inline block element to center instead of the left

Question

so I've got this layout that works fine in desktop screen: look at top image.

But when in mobile layout/zoomed in it becomes this: (look at middle image).

So what i'm trying to achieve is for the image to be zoomed in to the center like background size cover behavior. (look at bottom image)

Can anyone help me on this layout issue? Thanks in advance.

Answer 1

Use flexbox to solve this.

.center {
  display: flexbox;
  justify-content: center;
}

Apply this .center class to container box.

Check out this link for browser support for flexbox.

Answer 2

you can make img as absolute and add

img{
   left:0;
   right:0;
   margin: auto;
   overflow:hidden;
}