纯css解决方案

Question

通常情况下，您使用display: block; margin: auto居中图像，但如果图像大于容器，则溢出到右侧。如何让它同样溢出到双方？容器的宽度是固定的并且是已知的。图像的宽度未知。

Answer 1

纯css解决方案

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

改进答案

原始答案存在问题（如下）。如果图片大于outer以其自动边距为中心的容器，则会截断左侧的图像并在右侧创建过多的空间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 2

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

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

Answer 3

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 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

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

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

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

假设outer位于宽度指定的容器中。

Answer 7

我只能想到一个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 8

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

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

Answer 9

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

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

9 个答案:

纯css解决方案

改进答案

原创想法（历史）