如果图像比它的容器宽，我该如何定位图像呢?

Normally, you center images with display: block; margin: auto, but if the image is larger than the container, it overflows to the right. How do I make it overflow to the both sides equally? The width of the container is fixed and known. The width of the image is unknown.

通常情况下，您将图像居中显示:块;页边距:自动，但如果图像大于容器，则会向右溢出。如何使两边相等?容器的宽度是固定和已知的。图像的宽度是未知的。

9 个解决方案

#1

HTML

HTML

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

CSS

CSS

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

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

jQuery

jQuery

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

​

​

See it on jsFiddle: http://jsfiddle.net/4eYX9/30/

参见jsFiddle: http://jsfiddle.net/4eYX9/30/。

#2

A pure css solution

Requiring one extra wrapper (tested in FireFox, IE8, IE7):

需要一个额外的包装(在FireFox、IE8、IE7中测试):

Improved Answer

There was a problem with the original answer (below). If the image is larger than the container that outer is centered on with it's auto margins, then it truncates the image on the left and creates excessive space on the right, as this fiddle shows.

原始答案有一个问题(如下)。如果图像比外框的容器更大，那么它会截断左边的图像并在右边创建多余的空间，如图所示。

We can resolve that by floating inner right and then centering from the right. This still truncates the img off the page to the left, but it does so by explicitly pushing it that way and then centers back off of that, the combination of which is what prevents the extra horizontal scroll on the right. Now we only get as much right scroll as we need in order to see the right part of the image.

我们可以通过向右浮动来解决这个问题。这仍然将img从页面的左边截断，但它是通过显式地将其推到左边，然后将其居中，这样的组合阻止了右侧的额外水平滚动。现在我们只需要得到足够多的正确滚动就可以看到图像的正确部分。

Fiddle Example (Borders in fiddle are for demo only.)

小提琴的例子(小提琴的边框只用于演示)。

Essential CSS

必要的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 */
}

If you desire no right scroll at all for wide images

如果你想要的是没有任何权利的滚动为宽的图像

Then using the above, also set whatever element wraps outer (like body or a third wrapper) to have overflow: hidden.

然后使用上面的方法，还可以设置任何外部元素(如body或第三方包装器)的溢出:hidden。

---

Original Idea (for History)

Fiddle Example (Borders in fiddle are for demo only.)

小提琴的例子(小提琴的边框只用于演示)。

HTML

HTML

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

CSS

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

#3

Here's a 2 line CSS solution (a couple more lines might be required for cross-browser support):

这里有一个两行CSS解决方案(跨浏览器支持可能需要多行):

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

#4

Alternative pure CSS solution is to use transform attribute:

另一种纯粹的CSS解决方案是使用transform属性:

HTML:

HTML:

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

CSS:

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

小提琴

Just to add a overflow:hidden to parent div to hide the extra area of the image.

只需添加一个溢出:隐藏到父div以隐藏图像的额外区域。

#5

Your best bet is to set it as background image of the container instead.

最好的方法是将它设置为容器的背景图像。

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

#6

In fact there is a simpler pure css/html way (without large horizontal scroll) :

实际上有一种更简单的纯css/html方式(没有大的水平滚动):

Html :

Html:

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

Css :

Css:

If you don't want to see image overflow

如果不想看到图像溢出

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

With image overflow visible

与图像溢出可见

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

A background solution with image overflow visible :

可见图像溢出的背景解决方案:

Html :

Html:

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

Css :

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

assuming outer is in a width specified container.

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

#7

I can only think of a Javascript solution since what you need to do is relatively position the image a negative amount to the left of its container:

我只能想到一个Javascript解决方案因为你需要做的是相对地将图像放在它的容器的左边

jQuery

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

#8

I don't think there is a pure CSS solution (Except for the next answer :)). However with Javascript it would be just a matter of finding the width of the image, subtracting the container width, dividing by two and you have how far to the left of the container you need.

我认为没有一个纯粹的CSS解决方案(除了下一个答案:))。但是，对于Javascript，只需找到图像的宽度，减去容器的宽度，除以2，就可以得到所需的容器左边的距离。

#9

I found this to be a more elegant solution, without flex, similar to something above, but more generalized (applies on both vertical and horizontal):

我发现这是一个更优雅的解决方案，没有flex，类似于上面的东西，但更一般化(适用于垂直和水平):

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