Динамический элемент масштабирования с неизвестным соотношением сторон

Question

У меня есть IMG что я изменить размер динамически с помощью CSS, но делать предположения о соотношении сторон:

.interview-patient { 
    width: 100vw * $interview-patient-scalar; 
    height: 281.9vw * $interview-patient-scalar; 
    max-height: 100vh * $interview-patient-scalar; 
    max-width: 36.75vh * $interview-patient-scalar; 
    margin: auto; 
    position: absolute; 
    top:0;bottom:0; /* vertical center */ 
    left:0;right:0; /* horizontal center */ 
} 

Проблема в том, соотношение сторон изменяется, как я загружать разные пациенты.

Как я мог достичь такого же результата, но не допуская предположений относительно соотношения сторон?

Answer 1

Я собираюсь сделать некоторые предположения здесь, потому что вы включили только небольшой фрагмент своего CSS и никакой разметки.

Вместо изменения размера изображения, поместите его в контейнер и установите для заполнения доступного пространства или придайте ему размер. Тогда пусть странствовать изображение бесплатно внутри как это:

.image .imageWrapper { 
 
    position: absolute; 
 
    right: 20px; 
 
    left: 20px; 
 
    top: 20px; 
 
    bottom: 20px; 
 
} 
 
.image .imageWrapper img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<div class="image"> 
 
    <div class="imageWrapper"> 
 
     <img src="http://cdn.teckler.com/images/Revanth/fd64d1530a2af6b98875117222d111d3.jpg" /> 
 
    </div> 
 
</div>

Соотношение сторон становится спорным, так как после того, как изображение достигает края своего родителя он начнет масштабе.