Chia tỷ lệ hình ảnh CSS để vừa trong khu vực không bị bóp méo

Question

Có cách nào với CSS hoặc cách khác làm cho hình ảnh vừa với một khu vực hay không. Cho phép nói rằng tôi có nhiều hình ảnh có kích thước khác nhau và tôi muốn tất cả chúng phù hợp với một div có kích thước 150px x 100px. Tôi không muốn chia tỷ lệ hình ảnh mặc dù một số có thể cao và những người khác thu hẹp tôi chỉ đơn giản muốn họ vừa với khu vực này với phần còn lại bị ẩn.

Tôi đã nghĩ đến việc sử dụng overflow:hidden nhưng dường như không bị ẩn trong IE6.

Bất kỳ ý tưởng nào?

Marvelous

Answer 1

Bạn nên cố gắng sử dụng này:

img{ 
    width: auto; 
    max-width: 150px; 
    height: auto; 
    max-height: 100px; 
} 

Edit: Hình như IE6 không hỗ trợ max-width và tính max-height. Tuy nhiên, bạn có thể thực hiện giải pháp được cung cấp tại đây: max-width, max-height for IE6

Answer 2

Khi bạn nói "vừa trong khu vực này" với phần còn lại bị ẩn, tôi cảm thấy như bạn muốn hình ảnh không được thu nhỏ và cắt giảm bất kỳ phần thừa nào.

Tôi có thể giải thích bạn đang đặt câu hỏi sai, nhưng hãy thử điều này và xem liệu nó có tạo ra hiệu ứng bạn đang tìm kiếm hay không.

.img-holder { 
 
    width: 150px; 
 
    height: 150px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.img-holder img { 
 
    position: absolute; 
 
    display: block; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="img-holder"> 
 
    <img src="http://img.playit.pk/vi/dH6NIe7wm4I/mqdefault.jpg" /> 
 
</div>

Answer 3

này sẽ không làm việc trong IE6 (theo yêu cầu của OP), nhưng cho đầy đủ, bạn có thể đạt được hiệu quả cần thiết trên các trình duyệt mới hơn sử dụng CSS3 của background-size:cover và thiết lập hình ảnh làm trung tâm hình nền. Cũng giống như vậy:

div { 
    width:150px; 
    height:100px; 
    background-size:cover; 
    background-position:center center; 
    background-repeat:no-repeat; 
    background-image:url('somepic.jpg'); 
} 

Answer 4

này đã làm việc cho tôi:

img.perfect-fit { 
    width: auto; 
    height: auto; 
    min-width: 100%; 
    min-height: 100%; 
} 

Nó cố gắng để làm một "hoàn toàn phù hợp" của container, kéo dài bản thân để phù hợp với các giới hạn trong khi duy trì tỷ lệ hình ảnh. Chưa thử nghiệm nó với IE6.

JSFiddle:http://jsfiddle.net/4zudggou/