相关疑难解决方法(0)

我一直试图解决如何仅使用css将div中的超大图像居中.

我们使用流体布局,因此图像容器的宽度随页面宽度而变化(div的高度是固定的).图像位于div内,其值为嵌入框阴影,以便看起来好像是在图像中查看页面.

图像本身已经调整大小,以尽可能广泛的价值填充周围的div(设计有一个max-width值).

如果图像小于周围的div,则很容易做到:

margin-left: auto;
margin-right: auto;
display: block; 

但是当图像大于div时,它只是从左边缘开始,偏离右边中心(我们正在使用overflow: hidden).

我们可以指定一个width=100%,但是浏览器在调整图像大小和网页设计中心方面做了很糟糕的工作,围绕着高质量的图像.

有关图像居中的想法,以便overflow:hidden均匀地切断两个边缘？

在这个页面上,有一些员工照片.

在纵向模式的iPad上,员工照片在右侧被切断.

我不介意它们被切断,但我希望它们对齐中心,而不是左对齐.

请注意,我希望图像尺寸相同,只是向左移动对齐以使其居中,以便面部显示在图像边界的中间.

我从这个问题尝试了以下解决方案:

.ult-ib-effect-style13.ult-ib2-min-height img {
    display:block;
    margin:auto;
}

和

.ult-ib-effect-style13.ult-ib2-min-height {
    text-align: center; 
}

和

.ult-ib-effect-style13.ult-ib2-min-height {
    display: flex;
    justify-content: center;
}

但这些都不起作用.