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

Posted 2023-03-06

【中文标题】如果图像比其容器宽，我如何居中？

【英文标题】：How do I center an image if it's wider than its container?

【发布时间】：2011-03-19 01:22:54

【问题描述】：

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

【参考方案1】：

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

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



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

【参考方案2】：

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

.wrapper 
    overflow: hidden;

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

【参考方案3】：

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

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

【参考方案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 以隐藏图像的额外区域。

【参考方案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%; 

【讨论】：

+1 - 很棒。 float: left 在.inner 风格中是必需的吗？

但是，对于新修订的解决方案，float: right 是必需的。

效果很好！我唯一要添加的是在末尾带有“clear class”的 div 以清除 --- .clear clear:both; 和

出于我自己的目的，我分叉了您的小提琴以使用动画功能完成它的步伐。它非常好！谢谢！ jsfiddle.net/hSNBT

注意：如果您在图像本身上放置了明确的尺寸（例如，对于响应式设计），您还需要将这些相同的尺寸（特别是宽度）应用于 .inner 类，否则在 IE 中图像不会居中。

【参考方案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;

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

【参考方案7】：

HTML

​<div class="image-container">
  <img src="http://www.google.com/images/logo.gif"  />
</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/

【讨论】：

对我来说完美的解决方案，这真的让我很开心，我只是在高度上添加了相同的逻辑，所以它会匹配我所有的案例jsfiddle.net/4eYX9/152

【参考方案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
        )
    
)

【参考方案9】：

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

【参考方案10】：

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

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

【讨论】：

@Cannibal：啊，我现在明白你的“不能溢出”是什么意思了。确实如此，您只是希望溢出可见。不，仅使用 CSS 背景图像确实不可能。仅当您想将其放在 <body> 上时才有用。