Căn chỉnh hình ảnh để căn giữa bên trong một div nhỏ hơn

Question

Tôi có một div với width:100px và height:100px (nói) Bên trong đó, chỉ có một hình ảnh có chiều cao luôn được cố định là 100px.

Tôi muốn đặt hình ảnh theo chiều ngang ở giữa.

Ở đây có 3 trường hợp: chiều rộng

1. hình ảnh là tương đương với chiều rộng div của, không có vấn đề
2. chiều rộng hình ảnh của nhỏ hơn chiều rộng div, tôi có thể sử dụng margin: auto đây rộng
3. hình ảnh là hơn chiều rộng của div

Tôi muốn phần trung tâm của hình ảnh hiển thị bên trong div.

phương tiện, nếu chiều rộng hình ảnh là 120px và như chiều rộng div là 100px và overflow:hidden Tôi muốn px 10 hình ảnh để px 110 để được nhìn thấy (như vậy, left: 10px và right: 10px của hình ảnh được ẩn dưới div)

Điều này có thể thông qua một số thuộc tính CSS không? (Tôi không biết chiều rộng của hình ảnh đang tải! Vì vậy tôi muốn nó hoạt động. Cũng muốn tránh tính toán bên javascript để tìm thêm chiều rộng và đưa ra margin-left: -giá trị bla bla ..)

Ngoài ra, tôi không thể cung cấp hình ảnh là background-image cho div!

Answer 1

Xem:http://jsfiddle.net/thirtydot/x62nV/ (và without overflow: hidden để dễ dàng nhìn thấy các định tâm)

này sẽ làm việc trong tất cả các trình duyệt, với ngoại lệ có thể có của IE6.

Đối với .imageContainer > span, margin-left có nguồn gốc từ width và width là số tùy ý kiểm soát chiều rộng hình ảnh tối đa sẽ được hỗ trợ. Bạn có thể đặt width: 10000px; margin-left: -4950px; để hỗ trợ hình ảnh thực sự rộng, nếu cần.

HTML:

<div class="imageContainer"> 
    <span><img src="http://dummyimage.com/100x100/f0f/fff" /></span> 
</div> 

CSS:

.imageContainer { 
    border: 1px solid #444; 
    overflow: hidden; 
    width: 100px; 
    height: 100px; 
    margin: 15px; 
    text-align: center; 
} 
.imageContainer > span { 
    display: block; 
    width: 1000px; 
    margin-left: -450px; /* -(width-container width)/2 */ 
} 
.imageContainer > span > img { 
    display: inline-block; 
}