CSS: Vừa với hình ảnh nhỏ hơn

Question

Tôi đang cố gắng tạo vùng chứa biểu tượng sẽ hiển thị bất kỳ kích thước hình ảnh nào (dài hoặc rộng).

Hình ảnh phải phù hợp với vùng chứa có mặt nhỏ hơn, trong khi phần bổ sung sẽ nằm ngoài vùng chứa. Trước khi áp dụng tràn: ẩn nó sẽ làm việc như thế này.

của nó dường như khá dễ dàng để làm với js, nhưng tôi tò mò muốn tìm một giải pháp css.

<div class="container"> 
    <img src="test.png"/> 
</div> 

.container { 
    width: 30px; 
    height: 30px; 
} 
.container img { 
    position: relative; 
    left: 50%; 
    top: 50%; 
    transform: translateY(-50%) translateX(-50%); 
} 

Answer 1

sử dụng thuộc tính css này

.container img 
{ 
height:100%; 
width:100%; 
} 

Answer 2

Đây là một nhiệm vụ khá khó khăn nếu bạn không muốn dùng đến nền CSS với background-size:cover (mặc dù đó thực sự không phải là một giải pháp xấu hoặc) vì của một yếu tố quan trọng: hình ảnh ngang với hình ảnh dọc. Không có cách nào để phát hiện hướng của một hình ảnh trong CSS. Đây là vấn đề vì bạn không thể chỉ định height và width (hoặc max-height và max-width) đến 100% và mong đợi nó hoạt động. Nó sẽ bóp méo hình ảnh và mất tỷ lệ khung hình. Tôi đề nghị trong trường hợp này để sử dụng một số lượng javascript để phân biệt hai. Thật không may, nhưng cần thiết nếu bạn muốn đạt được hiệu ứng này với các yếu tố HTML img (một lần nữa, không phải là giải pháp duy nhất. Hình nền vẫn còn khả thi).

Đây là những gì tôi đã đưa ra để đạt được hiệu ứng này:

var images = document.querySelectorAll('.container img'); 
 
for(var i = 0, len = images.length; i < len; i++) { 
 
    images[i].addEventListener('load', function() { 
 
    this.className += (this.width > this.height) ? ' landscape' : ' portrait'; 
 
    }); 
 
}

.container { 
 
    position: relative; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 3em auto; 
 
} 
 
.container:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    border: 2px solid; 
 
    box-sizing: border-box; 
 
} 
 
.container img { 
 
    position: absolute; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    padding: 2px; 
 
    box-sizing: border-box; 
 
} 
 

 
.container img.landscape { 
 
    max-width: none; 
 
} 
 
.container img.portrait { 
 
    max-height: none; 
 
}

<div class="container"> 
 
    <img src="//placehold.it/200x300"/> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="//placehold.it/300x200"/> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="//placehold.it/200x200"/> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="//placehold.it/500x100"/> 
 
</div>

Answer 3

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Hóa ra có một cách khác để làm điều này.

<img style='height: 100%, width: 100%, object-fit: cover'/> 

sẽ thực hiện công việc. Đó là công cụ CSS3.

Fiddle: http://jsfiddle.net/mbHB4/3/