Question

我有一个比容器高的图像，现在我有溢出隐藏，这是好的，因为我不希望图像从容器中出来。 - 问题是我想至少让图像的中心显示而不是顶部？

我知道有scrollTop但滚动所有内容，包括按钮等。

有什么建议吗？

Answer 1

如果您可以在代码中使用“position：absolute”或“position：fixed”，则只需在容器上使用CLIP属性即可。请查看Clip property

Answer 2

试试这个：

<div class="container">
    <img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" />
</div>
<br/>
<br/>
<br/>
<img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" />

的CSS：

.container {
    width: 300px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border: 1px solid red;
    margin: 100px;
}
.container img {
    top: 50%;
    left: 50%;
    width: 640px;
    height: 480px;
    margin: -240px 0 0 -320px;
    position: absolute;
}

边距-240px是图像的高度（480px）除以2，边距-320px是图像的宽度（640px）除以2。

的 Example

Answer 3

将图像设置为容器的背景。

像，

#container{
  background-image: url(path-to-file/img.jpg);
  background-repeat:no-repeat;
  background-position: center center;
}

Answer 4

尝试：

#container {
  background-image: url('path/to/your/image.xyz');
  background-size: cover;
}

如果您有<img>列表作为幻灯片显示，则可以将<img>标记替换为<div>并使用上面的CSS;或者您必须调整（调整大小）实际图像。

Answer 5

<强> DEMO

您可以使用以下最大高度

<强> HTML

<div class="box"><img src="http://placehold.it/350x250" alt=""></div>

<强> CSS

.box{height:100px; border:1px solid red;}
.box img{max-height:100%;}

Answer 6

您标记了jQuery，因此我将为您提供jQuery解决方案。

CSS非常棒，但对于动态高度等，很难通过浏览器获得可靠的结果。我的jQuery解决方案应该非常简单，并且在大多数情况下都能正常运行。

这是一个有效的例子： http://jsfiddle.net/eh5h8/

容器高300像素，图像高500像素。计算差值（200px）然后除以2，这样我们就可以正确地将其偏移到中心（100px）。

您可以采用此示例并将其应用于您的需求。

<强> HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div id="container">
    <img src="http://lorempixel.com/500/500/" width="500" height="500" alt="" />
</div>

<强> CSS

body {
    background: #eee;
}

#container {
    width: 500px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    border: 10px solid #fff;
}

jQuery（请记住链接到jQuery库）

$(document).ready(function() {

    var $container = $("#container"),
        $img = $container.find("img");

    if ( $img.height() > $container.height() ) {

        var difference = Math.round( ( $img.height() - $container.height() ) / 2);
        $img.css({ "margin-top" : "-" + difference + "px" });

    }

});

祝你好运！

IMG比容器大，我怎样才能使图像居中？

6 个答案: