将较小尺寸的div中的未知大小的大图像居中，并隐藏溢出

77

我想在没有javascript且没有background-images的div中将img居中。

这是一些示例代码

<div> 
    <img src="/happy_cat.png"/> 
</div>

我不知道img的大小，它应该能够超过父级的宽度
我不知道父div的宽度（是100％）
父div的高度固定
图片大于父对象，并且父对象溢出：隐藏
只需要支持现代浏览器

所需的结果。（忽略不透明度等，只需注意位置）。

在此处输入图片说明

我知道使用背景图片可以轻松完成此操作，但这对我来说不是一个选择。我也可以使用javascript，但这似乎是一种非常繁重的方法。

谢谢！

插口

html css

— 杰克·马尼
source

3

我不认为可以单独使用CSS来完成。您是否同样愿意接受jquery / js解决方案？

— Roy MJ 2013年

1

我只想在这里使用JS作为最后的结果。如果经过调查这是不可能的，那么我会退出并使用JS，但是我敢肯定，可以使用一些漂亮的现代CSS3来完成。

— JackMahoney

@JackMahoney一个问题：父母的尺寸（或者具体来说是高度，因为宽度已经是100％）是<div>仅由内部图像确定的吗？

— 特里

好问题。父母的身高是已知的并且是固定的。

— JackMahoney

div

— dayuloli，2015年

103

那这个呢：

.img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

这假定父div相对放置。我认为，如果您希望.img相对放置而不是绝对放置，则此方法有效。只需删除position: absolute并将顶部/左侧更改为margin-top和即可margin-left。

你可能会想增加与浏览器的支持transform，-moz-transform等等。

— 埃文·莱曼（Evan Layman）
source

2

哈-您知道这实际上是有效的！谢啦。多么有趣的解决方案。:)

— JackMahoney

我最近了解到翻译居中的功能，它很棒！很高兴为您提供帮助。

— 伊万·莱曼

1

你不知道你救了我多少时间！

— syd619

4

这很好用，但是如果您想要兼容IE8的版本，则应在此处

— dayuloli 2015年

1

此方法并不完美，因为如果您将margin-top更改为50％，则50％是基于父级宽度而不是父级高度（假设父级宽度不等于其高度），因此会出错页边距。您如何看待这种情况？

— 很快

51

旧问题，新答案：

当图像大于包装的div时，text-align：center或margin：auto将不起作用。但是，如果图像较小，则具有绝对定位或负边距的解决方案将产生怪异的效果。

因此，当实际上实际上不知道图像大小（例如在CSM上）并且它可能大于或小于包装div时，可以使用一种优雅的CSS3解决方案来满足所有目的：

div {
    display: flex;
    justify-content: center;
    height: 400px; /* or other desired height */
    overflow: hidden;
}
img {
    flex: none; /* keep aspect ratio */
}

请注意，根据样式表中的其他规则，可能需要在img上附加width：auto和/或max-width：none。

— 拉万
source

4

这很好。如果您还想垂直居中，则可以将其添加align-items: center到div容器中。

— 科里·格罗斯

天才。谢谢！我还使用了Cory的align-items: center建议来进行垂直居中，这很有效。

— BigglesZX

3

这种拉伸在我的情况下的图像

— Cedric Ipkiss 17-4-25

1

@ che-azeh可能还有另一个CSS规则，其中max-height或max-width适用于图片...

— RavanH

1

很棒的解决方案！

— 伊万·多罗申科

2

这总是有些棘手，并且有很多解决方案。我发现最好的解决方案如下。这使它在垂直和水平方向上都居中。

的CSS

#container {
    height: 400px;
    width: 400px;
}
.image {
    background: white;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.left {
    width: 100px;
    height: 100%;
    z-index: 2;
    background: white;
    top: 0px;
    position: absolute;
    left: 0px;
}
.right {
    width: 100px;
    height: 100%;
    z-index: 2;
    position: absolute;
    background: white;
    top: 0px;
    right: 0px;
}
.image img {
    margin: auto;
    display: block;
}

的HTML

    <div id="container">
<div class="image">
    <div class="left"></div>
    <div class="right"></div>
    <img width="500" src="https://www.google.com.au/images/srpr/logo11w.png" />
</div>

见小提琴

稍有不同的技术：小提琴

— 自行车
source

由于您在.centered容器上设置了显式宽度，因此无法使用。我不知道任何元素的宽度！

— JackMahoney

如果img宽度大于容器的宽度，则max-width不能将其居中。 jsfiddle.net/ZXUxv/1

— JackMahoney

我认为您不理解我的要求（抱歉，这听起来很粗鲁）。即使我设置了最大宽度，如果图像本身大于容器（我希望允许），那么它将不会居中。我不能用最大宽度限制图像的大小。它必须大于其父级并在其中居中。请参阅我最近的评论中的js小提琴。它具有较大的图像和最大宽度。

— JackMahoney

@JackMahoney对不起，我没有看到您的评论。请检查更新的小提琴。它应该按照您的要求进行。否则我不知道你在问什么。

— 骑自行车

抱歉，更新的小提琴仍然没有以父图像为中心的图像。无论如何，谢谢您的时间。如果您对问题感到困惑，请参阅更新后的问题中的我的图像。

— JackMahoney

2

感谢大家的帮助。~~我将认为这仅在CSS中是无法实现的。~~

~~我将转向jQuery解决方案。这是一些有兴趣的伪代码。~~

我本来打算放弃CSS解决方案，但是看起来可以做到（请参见已接受的答案）。这是我要使用的JS解决方案。

var $img = $('img'),
    w = $img.width();

$img.css({marginLeft: -w});

和随附的CSS

img{
  position:absolute;
  left:50%;
}

— 杰克·马尼
source

2

我知道这是旧的，但我也想出了一个与上述非常相似的纯CSS解决方案。

.parent {
    float: left;
    position: relative;
    width: 14.529%; // Adjust to your needs
}

.parent img {
    margin: auto;
    max-width: none; // this was needed for my particular instance
    position: absolute;
    top: 11px; right: -50%; bottom: 0; left: -50%;
    z-index: 0;
}

— 任何图形
source

1

只需按照以下步骤初始化图像的位置即可。

HTML：

<div> 
    <img id="img" src="/happy_cat.png"/> 
</div>

CSS：

#img {
    left: 0;
    right: 0;
}

或搭配 margin: auto;

这是用于水平对齐。也可以垂直对齐它，然后可以对进行操作display: table-cell;，但这不是一个好习惯，因为您不是桌子。<div>vertical-align: middle;<div>

— 埃米莉
source

1

抱歉，这不适用于宽度大于父级的图像。

— JackMahoney

哦，是的。我错过了。

— 艾米莉（Emilie），