代码之家 › 专栏 › 技术社区 › CannibalSmith

如果一个图像比它的容器宽,我该如何将其居中?

css

CannibalSmith · 技术社区 · 15 年前

通常情况下,您可以使用 display: block; margin: auto ,但如果图像大于容器,则会溢出到右侧。我如何使它平均地溢出到两边?容器的宽度是固定的和已知的。图像的宽度未知。

9 回复 | 直到 11 年前

jessegavin 13 年前

HTML格式

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

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

111

ScottS 11 年前

需要一个额外的包装器(在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 */
}

如果你愿意不右滚动显示宽图像

然后使用上述方法,也可以设置任何元素包装 外面的 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%; 
}

Sasha 9 年前

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

fuermosi777 10 年前

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

<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

BalusC 15 年前

你最好把它设为 background image 而不是容器。

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

Noémien Kocher 12 年前

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>

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位于指定宽度的容器中。

Pat 15 年前

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

Cezar D. 8 年前

我发现这是一个更优雅的解决方案,没有flex,类似于上面的内容,但更通用(适用于垂直和水平方向):

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

-1

qw3n 15 年前

我不认为有一个纯粹的CSS解决方案(除了下一个答案:))。然而,使用Javascript只需找到图像的宽度,减去容器的宽度,除以2,就可以得到所需容器的左边有多远。