如果图像比其容器宽，我如何居中？

Question

通常，您使用display: block; margin: auto 将图像居中，但如果图像大于容器，则会向右溢出。如何让它均匀地溢出到两边？容器的宽度是固定的并且是已知的。图片的宽度未知。

Answer 1

我看到这是一篇旧帖子，所以也许现在每个人都知道这一点，但我需要帮助，我使用 flex 解决了这个问题：

.parent {
   display: flex;
   /* give it the width and height you like */

}

.parent img {
   min-width: 100%;
   min-height: 100%;
   object-fit: cover;
}

Answer 2

我发现这是一个更优雅的解决方案，没有 flex，类似于上面的内容，但更通用（适用于垂直和水平）：

.wrapper {
    overflow: hidden;
}
.wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* height: 100%; */ /* optional */
}

Answer 3

这是一个 2 行 CSS 解决方案（跨浏览器支持可能需要多行）：

img {
    margin-left: 50%;
    transform: translateX(-50%);
}

Answer 4

另一种纯CSS解决方案是使用transform属性：

HTML：

<div class="outer">
    <img class="image" src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>

CSS：

.outer {
    position: relative;
    width: 100px;
    border: 1px solid black;
    height: 150px;
    margin-left: 100px; /* for demo */
    /* overflow: hidden; */
}

img.image {
    width: 200px;
    opacity: 0.7;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

Fiddle

只需将overflow:hidden 添加到父div 以隐藏图像的额外区域。

Answer 5

纯CSS解决方案

需要一个额外的包装器（在 FireFox、IE8、IE7 中测试）：

改进的答案

原来的答案有问题（如下）。如果图像大于outer 以它的自动边距为中心的容器，则它会截断左侧的图像并在右侧创建 excessive 空间，as this fiddle shows。

我们可以通过将inner 向右浮动然后将从右侧居中来解决这个问题。这仍然会将页面左侧的img 截断，但它是通过显式将它推到那个方向然后从那个方向移回中心来实现的，这就是防止 额外 水平滚动的原因在右边。 现在我们只需要获得尽可能多的向右滚动来查看图像的右侧部分。

Fiddle Example（小提琴中的边框仅供演示。）

基本 CSS

div.outer {
    width: 300px; /* some width amount needed */
    margin: 0 auto; 
    overflow: visible;
}
div.inner {
    position:relative;
    float: right; /* this was added and display removed */
    right: 50%;
}
div.inner img {
    position: relative; 
    right:-50%; /* this was changed from "left" in original */
}

如果您希望不在宽幅图像上完全不向右滚动

然后使用上面的方法，还设置任何包含outer（like body 或a third wrapper）的元素具有overflow: hidden。

---

原创（历史）

Fiddle Example（小提琴中的边框仅供演示。）

HTML

<div class="outer">
    <div class="inner">
        <img src="/yourimage.png">
    </div>
</div>

CSS

div.outer {
    width: 300px; /* some width amount needed */
    margin: 0 auto; 
    overflow: visible;
}
div.inner {
    display: inline-block; 
    position:relative; 
    right: -50%;
}
div.inner img {
    position: relative; 
    left:-50%; 
}

Answer 6

其实还有更简单的纯css/html方式（不用大水平滚动）：

HTML：

<div class="outer">
  <img src="/my/sample/image.jpg">
</div>

CSS：

如果你不想看到图片溢出

div.outer img {
    position: absolute;
    left: -50%;
    z-index:-1;
}
div.outer {
    overflow: hidden;
    position: relative;
    height: 200px;
}

图像溢出可见

div.outer img {
    position: absolute;
    left: -50%;
    z-index:-1;
}
div.outer {
    overflow: visible;
    position: relative;
    height: 200px;
}
body, html {
    overflow-x:hidden;
}

图片溢出可见的背景解决方案：

HTML：

<div class="outer">
  <div class="inner"></div>
</div>

CSS：

div.outer {
    width: 100%;
    height: 200px;
}
div.inner {
    background: url('/assets/layout/bg.jpg') center no-repeat;
    position: absolute;
    left: 0;
    width: 100%;
    height: inherit;
}

假设外部是在一个指定宽度的容器中。

Answer 7

HTML

​<div class="image-container">
  <img src="http://www.google.com/images/logo.gif" height="100" />
</div>​

CSS

.image-container {
    width: 150px;
    border: solid 1px red;
    margin:100px;
}

.image-container img {
    border: solid 1px green;
}

jQuery

$(".image-container>img").each(function(i, img) {
    $(img).css({
        position: "relative",
        left: ($(img).parent().width() - $(img).width()) / 2
    });
});

​

在 jsFiddle 上查看：http://jsfiddle.net/4eYX9/30/

Answer 8

我只能想到一个 Javascript 解决方案，因为您需要做的是将图像相对定位在其容器左侧的负数：

jQuery

$(document).ready(function(){

    var theImg = $('#container img');
    var theContainer = $('#container');
    if(theImg.width() > theContainer.width()){
        theImg.css({
            position: 'relative',
            left: (theContainer.width() - theImg.width()) / 2
        })
    }
})

Answer 9

我认为没有纯 CSS 解决方案（下一个答案除外 :)）。然而，使用 Javascript 只需找到图像的宽度，减去容器宽度，除以 2 即可得到所需的容器左侧多远。

Answer 10

最好将其设置为容器的background image。

#container {
    background: url('url/to/image.gif') no-repeat center top;
}