将内联块元素缩放到中心而不是左侧

Question

所以我已经在桌面屏幕上使用了这种布局：看顶部图像。

但是在移动布局/放大时，它变为:(看中图）。

所以我想要实现的是将图像放大到中心，就像背景大小覆盖行为一样。 （看下图）

任何人都可以帮我解决这个布局问题吗？ 提前谢谢。

Answer 1

使用flexbox解决此问题。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

将此.center课程应用于容器框。

有关flexbox的浏览器支持，请查看此link。

Answer 2

你可以将img设为绝对并添加

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