Question

我想将一个img置于div 而不是javascript 和而不使用background-images 。

以下是一些示例代码

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

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

期望的结果。（忽略不透明等，只需注意定位）。

enter image description here

我知道这可以通过背景图片轻松完成，但这不是我的选择。我也可以使用javascript，但它似乎是一种非常沉重的方式来实现这一点。

谢谢！

杰克

Answer 1

这个怎么样：

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

这假设父div相对定位。我认为如果你想要.img相对定位而不是绝对定位，这是有效的。只需删除position: absolute，然后将上/左更改为margin-top和margin-left。

您可能希望使用transform，-moz-transform等添加浏览器支持。

Answer 2

老问题，新答案：

当图像大于包装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 */
}

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

Answer 3

这总是有点棘手，有很多解决方案。我找到了最佳解决方案如下。它将其垂直和水平居中。

<强> 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>

See fiddle

略有不同的技巧：Fiddle

Answer 4

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

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

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

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

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

随附的CSS

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

Answer 5

我知道这已经过时了，但我也提出了一个非常类似于上面的纯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;
}

Answer 6

只需初始化图像的位置，如下所示。

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>，但这不是一个好习惯，因为{{1}}不是表格。

将一个未知大小的大图像置于较小的div内，并隐藏溢出

6 个答案: