div内的中心图像,隐藏溢出而不知道宽度

Question

我有一个图像,例如宽度为450px,一个容器只有300.当图像的宽度不恒定时,是否可以使用CSS将图像置于容器内？(某些图像可能是450宽,其他600等).或者我需要使用JavaScript中心吗？

Answer 1

这有什么好处？http://jsfiddle.net/LSKRy/

<div class="outer">
    <div class="inner">
    <img src="http://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
    </div>
</div>

.outer {
    width: 300px;
    overflow: hidden;
}

.inner {
    display: inline-block;
    position: relative;
    right: -50%;
}

img {
    position: relative;
    left: -50%;
}

Answer 2

但你为什么不把它隐藏起来，而不是隐藏部分图像

<div id="container" style="width: 300px">
  <img src="yourimage" width="100%">
</div>