Wymuś obraz, aby zmieścił się i zachował proporcje obrazu

Question

Chcę, aby obraz wypełnił 100% szerokości jego kontenera i chcę, aby była ustawiona właściwość max-heigth, a wszystko to zachowując proporcje, ale pozwalając utracić dowolną część obrazu.

img { 
    max-height:200px; 
    width:100%; 
} 

Znam podobną rzecz można zrobić z background-size własności, ale chcę, aby ten do inline <img> tagu.

Każdy pomysł, jak mogę to osiągnąć za pomocą CSS? lub javascript?

Answer 1

Można spróbować CSS3 object-fit i zobacz wsparcia przeglądarki tables.

CSS3 object-fit/object-position Sposób określania, w jaki sposób obiekt (obraz lub wideo) powinien zmieścić pudełka. opcje dopasowania obiektowego obejmują "zawierać" (dopasować zgodnie ze współczynnikiem proporcji ), "wypełnić" (rozciąga obiekt do wypełnienia) i "pokrywać" (pole przepełnienia , ale utrzymuje proporcje), gdzie położenie obiektu umożliwia zmianę położenia obiektu na podobnie jak obraz tła.

JSFIDDLE DEMO

.container { 
 
    width: 200px; /*any size*/ 
 
    height: 200px; /*any size*/ 
 
} 
 

 
.object-fit-cover { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; /*magic*/ 
 
}

<div class="container"> 
 
    <img class="object-fit-cover" src="https://i.stack.imgur.com/UJ3pb.jpg"> 
 
</div>

---

Podobne Info:

• Exploring object-fit ★ Mozilla Hacks

• Polyfill for CSS object-fit property