Question

在this page上，有一些员工照片。

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

我不介意他们被切断，但我希望他们对齐中心，而不是左对齐。

请注意，我希望图像尺寸相同，只需将对齐方式向左移动即可居中，以便面部显示在图像边界的中间。

我尝试过this question的以下解决方案：

.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;
}

但这些都不起作用。

Answer 1

首先，我检查了你的css，它的一团糟！ 你肯定应该重新修改它。所有这些!important陈述都是非常错误的做法。

但是，我调整了一些img样式并找到了符合您需求的解决方案。

诀窍是覆盖应用于图像的所有其他width和height样式，并简单地将其替换为仅根据容器的高度设置图像大小的样式。此解决方案可防止图像失真。

我还重置了translate3d样式，因此图像以容器为中心。

.ult-ib-effect-style13.ult-ib2-min-height img {
    min-width: auto!important;
    width: auto!important;
    max-width: none!important;
    height: 100%!important;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

结果：

编辑：

结果@ width：900px

它仍然很好，图像居中，没有失真。但是，您可以在此断点处使div更宽，以获得更优雅的整体效果。

见下面的例子：将列（.col-sm-3）设置为50％宽度，将img设置为heigth: 120%; max-heigth: none;

编辑：

如评论中所述，在您的网站加载所有其他样式表之后，尝试将您自己的css的<link>标记放在<head>的末尾。

这会导致你的css最后渲染，你的样式会覆盖以前的css。然后尝试将您的规则更改为上述说明中提出的规则。这应该可以解决问题。

Answer 2

您可以使用的图像：

img {
    display: block;
    margin: auto;
    width: 100%;
}

或者您可以使用Bootstrap

然后分配类“img-responsive center-block”

Answer 3

我知道有些解决方案可能有效，但问题还有更多。插入内嵌高度或宽度的不良做法。另外，在使用之前，您必须知道图像的确切尺寸。使用图像持有者有助于此。您使用height属性来缩小图像。如果您的图像不适合容器，那么您将始终遇到问题，这就是为什么您必须始终知道要使用的图像的确切高度和宽度。它还有助于提高性能。在较小的屏幕上，您的图像存在更多问题。由于图片的大小，右侧是黑色的。通过响应式设计，您希望图像更加方形，然后是矩形，即使它不完美。 css是乱七八糟的，你使用无用的属性和样式属性和值。只需调整容器宽度和高度相似的图片（col-sm-3），然后使用bootstrap“img-responsive”类，一切都会好的。

Answer 4

如果你关心的只是ipad肖像模式和chrome，safari或firefox等浏览器，那么请使用object-position。

object-position: center center;
object-fit:cover;

如果您需要在IE或Edge中获得支持，那么它就无法使用。

你可以提到你想要的任何位置，＆＃39;中心中心＆＃39;是左边50％，顶部50％。

请稍微清理一下代码，有很多重要的覆盖。

Answer 5

只需添加以下CSS

即可

@media (max-width:1024px) {
.ult-ib-effect-style13.ult-ib2-min-height img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
}
.ult-new-ib {
    max-height: 330px;
}
}

Answer 6

你有这个图像的css代码

.ult-ib-effect-style13.ult-ib2-min-height img {
    width: auto!important;
    max-width: none!important;
    height: 100%;
}

还添加这三行

position: relative;
left: 50%;
transform: translate(-50%, 0);

你赢了））

Answer 7

抱歉，我明白了。所以基本上你想把你的超大图像放在小div中。所以你的父div（Image Parent）是相对定位的。首先，您不需要为图像类编写的大量CSS。从'ult-ib-effect-style13.ult-ib2-min-height img'类中删除所有内容。现在您的代码看起来像

.ult-ib-effect-style13.ult-ib2-min-height img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    height: 100%;
}

即使您不打算从图像类中删除您的CSS，这也适用于所有屏幕宽度！ this question可能重复。您还可以在绝对父级的情况下相对定位图像。不要忘记使用转换， moz-transform 来实现跨浏览器兼容性，如链接中所述。

Answer 8

只需添加以下css：

.ult-ib-effect-style13.ult-ib2-min-height img {
    left: 50%;
    transform: translateX(-50%);
}

如何水平居中对齐图像

8 个答案:

结果：

编辑：

编辑：