Obraz środkowy wewnątrz dzioba z przelewem ukryty bez znajomości szerokości

Question

Mam obraz, który jest np. szerokość 450px i pojemnik tylko 300. Czy możliwe jest wyśrodkowanie obrazu wewnątrz kontenera za pomocą CSS, gdy szerokość obrazu nie jest stała (niektóre obrazy mogą mieć szerokość 450, inne 600 itd.). Czy muszę go wyśrodkować za pomocą JavaScript?

Answer 1

ale zamiast ukrywać część theimage dlaczego nie można umieścić go jak

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

Answer 2

to dobre? 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 3

Propozycja 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; 
} 

Propozycja 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; 
} 

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

Twierdzenie 4 (wydajność zatoru szkoły)

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

Oczywiście trzeba będzie ajust .css do własnych potrzeb

kontynuować.