Центральное изображение внутри div с переполнением скрыто, не зная ширины

У меня есть изображение, которое, например, ширина 450 пикселей и контейнер, который составляет всего 300. Можно ли центрировать изображение внутри контейнера с помощью CSS, когда ширина изображения не является постоянной (некоторые изображения могут быть шириной 450, другие 600 и т.д.). Или мне нужно сосредоточить его на JavaScript?

Ответ 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%;
}

Ответ 2

Предложение 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 (эффективность школьной школы):

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

Конечно, вам нужно будет скорректировать .css, чтобы удовлетворить ваши собственные потребности.

Продолжайте.

Ответ 3

но вместо того, чтобы скрывать часть изображения, почему бы вам не поместить его как

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