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

I have an image which is e.g. the width 450px, and a container which is only 300. Is it possible to center the image inside the container with CSS, when the width of the image isn't constant (Some images might be 450 wide, other 600 etc.). Or do I need to center it with JavaScript?

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

3 个解决方案

#1

This any good? http://jsfiddle.net/LSKRy/

这有什么好处? 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%;
}

#2

Proposition 1 :

命题1:

.crop {
    float:left;
    margin:.5em 10px .5em 0;
    overflow:hidden; /* this is important */
    border:1px solid #ccc;
}
/* input values to crop the image: top, right, bottom, left */
.crop img {
    margin:-20px -15px -40px -55px;
}

Proposition 2 :

命题2:

.crop{
    float:left;
    margin:.5em 10px .5em 0;
    overflow:hidden; /* this is important */
    position:relative; /* this is important too */
    border:1px solid #ccc;
    width:150px;
    height:90px;
}
.crop img{
    position:absolute;
    top:-20px;
    left:-55px;
}

proposition 3:

.crop{
    float:left;
    position:relative;
    width:150px;
    height:90px;
    border:1px solid #ccc;
    margin:.5em 10px .5em 0;
}
.crop p{
    margin:0;
    position:absolute;
    top:-20px;
    left:-55px;
    clip:rect(20px 205px 110px 55px);
}

Proposition 4 (hold-school efficiency):

命题4(持有学校效率):

.container {
    width:400px;
    height:400px;
    margin:auto;
    overflow:hidden;
    background:transparent url(your-image-file.img) no-repeat scroll 50% 50%;
}

Of course you will need to ajust the .css to suit your own needs

当然,您需要调整.css以满足您自己的需求

Carry on.

#3

-3

but instead of hiding part of theimage why don't you put it like

但不是隐藏部分图像,为什么不把它放在一边

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

#1