通常情况下，您将图像置于display: block; margin: auto display: block; margin: auto ，但如果图像大于容器，则会溢出到右侧。 我如何让它平等地溢出到双方？ 容器的宽度是固定的并且是已知的。 图像的宽度未知。

---

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/

---

一个纯粹的CSS解决方案

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

改进的答案

原始答案有问题（如下）。 如果图像大于outer以其自动边距为中心的容器，则会在该提琴显示时截断左侧的图像并在右侧创建多余的空间。

我们可以通过浮动inner权利然后集中权利来解决这个问题。 这仍然会截断页面左侧的img ，但是它通过明确地按下它来实现，然后居中放置，这样做的组合就是阻止右侧多余的水平滚动。 现在我们只需要获得尽可能多的右侧滚动条，以便看到图像的正确部分。

小提琴示例（小提琴中的边框仅用于演示。）

基本的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 （如body或第三个包装）以使其overflow: hidden 。

---

原创理念（历史）

小提琴示例（小提琴中的边框仅用于演示。）

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

---

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

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

链接地址: http://www.djcxy.com/p/89231.html

上一篇: How do I center an image if it's wider than its container?

下一篇: CSS: Stretching image to 100% width