Css 将图像居中放置在div内，隐藏溢出，但不知道宽度

我有一个图像，例如宽度为450px，一个容器只有300。当图像的宽度不是恒定的（一些图像可能是450宽，其他600宽等）时，是否可以使用CSS将图像居中于容器内。或者我需要使用JavaScript将其居中吗？

但是与其隐藏图像的一部分，不如将其像

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

这有什么好处吗

.外部{
宽度：300px；
溢出：隐藏；
}
.内部{
显示：内联块；
位置：相对位置；
右图：-50%；
}
img{
位置：相对位置；
左-50%；
}

提案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;
}

提议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;
}

提议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);
}

提案4（保持学校效率）：

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

---

继续

你说的中心是什么意思？像图像溢出被切断或图像缩小以适应其容器？如果我不清楚，我很抱歉。我注意到图像会有被裁剪的错觉。但是这不起作用，因为我不知道图像的大小，除非我使用JavaScript。然后，应用你的图像有背景。基本方式。@Dofs你是什么意思？“背景图像”技术？它正在发挥作用，过去和将来都会发挥作用谢谢，我可以把你的案子办好，但是我自己的造型有问题。谢谢。这真是天才！爱死它了！

.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);
}

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