Hình ảnh trung tâm bên trong div có ẩn bị tràn mà không biết chiều rộng

Question

Tôi có hình ảnh, ví dụ: chiều rộng 450px và vùng chứa chỉ có 300. Có thể căn giữa hình ảnh bên trong vùng chứa với CSS, khi chiều rộng của hình ảnh không cố định (Một số hình ảnh có thể rộng 450, 600 khác, v.v.). Hay tôi cần tập trung nó với JavaScript?

Answer 1

nhưng thay vì che giấu một phần của theimage tại sao bạn không đặt nó như thế

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

Answer 2

này có tốt không? 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

Dự luật 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; 
} 

Dự luật 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; 
} 

đề xuất 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); 
} 

Dự luật 4 (hiệu quả tổ chức giờ học):

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

Tất nhiên bạn sẽ cần phải ajust các .css cho phù hợp với nhu cầu riêng của bạn

Tiến trên.