चौड़ाई को जानने के बिना ओवरफ्लो के साथ div के अंदर केंद्र छवि

Question

मेरे पास एक छवि है जो उदा। चौड़ाई 450 पीएक्स, और एक कंटेनर जो केवल 300 है। क्या सीएसएस के साथ कंटेनर के अंदर छवि को केंद्र में रखना संभव है, जब छवि की चौड़ाई स्थिर नहीं है (कुछ छवियां 450 चौड़ी हो सकती हैं, अन्य 600 आदि)। या मुझे इसे जावास्क्रिप्ट के साथ केंद्रित करने की ज़रूरत है?

Answer 1

लेकिन इसके बजाय theimage का हिस्सा छुपाने का कारण है कि आप इसे पसंद

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

Answer 2

यह किसी भी अच्छा नहीं डाल सकता हूं? 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

प्रस्ताव 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 ajust की आवश्यकता होगी।