Kích thước hình ảnh vào vùng chứa trong khi duy trì tỷ lệ co trong CSS?

Question

Tôi có một loạt các hình ảnh có kích thước khác nhau (không xác định).

Tôi muốn thả những hình ảnh này vào div và yêu cầu chúng tự động tuân theo kích thước của div, đồng thời duy trì tỷ lệ khung hình của chúng.

Nói cách khác, nếu hình ảnh rộng hơn cao, chiều rộng sẽ là 100% và chiều cao sẽ tăng theo tỷ lệ. Nếu hình ảnh cao hơn chiều rộng, chiều cao sẽ là 100% và chiều rộng sẽ tăng theo tỷ lệ.

Có cách nào để thực hiện điều này trong css thuần túy không?

Cảm ơn

Answer 1

Sử dụng các thuộc tính css max-width và max-height vào hình ảnh sẽ đưa bạn đến nơi bạn cần phải.

Fiddle

http://fiddle.jshell.net/sHAQ9/

HTML

<div>  
    <img src="http://dummyimage.com/200x300/000000/ffffff.png&text=tall%20image"/> 
</div> 
<div>  
    <img src="http://dummyimage.com/300x200/000000/ffffff.png&text=wide%20image"/> 
</div> 

CSS

div { 
    width: 150px; 
    height: 150px;  
    overflow: hidden; 
    background: #ccc; 
    margin: 10px; 
    text-align: center; 
    line-height: 150px; 
} 
div img { 
    max-width: 100%; 
    max-height: 100%; 
    vertical-align: middle; 
} 

Answer 2

Tôi làm điều này với việc thiết lập bộ sưu tập của tôi:

.ScaledImg { 
    max-width:100%: 
    max-height:100%; 
} 

Các img quy mô để phù hợp với kích thước của mẹ/thùng trên cơ sở này, trong khi duy trì tỉ lệ của nó. Tôi đã không cố gắng này với bất cứ điều gì khác hơn là imgs, nhưng hoạt động tốt cho tôi. Không cần số tờ khai width hoặc height.

Answer 3

Hãy thử điều này:

<style> 
    .fit_image img { 
     max-width: 100%; 
     max-height: 100%; 
    } 
    .fit_image { 
     width: 400px; 
     height: 200px; 
    } 
</style> 

<div class="fit_image"> 
    <img src="/path/to/image.jpg"> 
</div> 

Answer 4

Dựa trên fiddle @iambriansreed,
Sử dụng zoom vào hình ảnh khi nó nhỏ hơn so với container

div img { 
    zoom: 10; 
    max-width: 100%; 
    max-height: 100%; 
    vertical-align: middle; 
} 

http://fiddle.jshell.net/vcapr0k8/