Примітка. Незважаючи на те, що це прийнята відповідь, відповідь нижче є більш точною і на даний момент підтримується у всіх браузерах, якщо у вас є можливість використання фонового зображення.
Ні, немає єдиного способу CSS зробити це в обох напрямках. Ви можете додати
.fillwidth {
min-width: 100%;
height: auto;
}
Щоб елемент завжди мав його на 100% шириною і автоматично масштабував висоту до співвідношення сторін або зворотного:
.fillheight {
min-height: 100%;
width: auto;
}
завжди масштабувати до максимальної висоти та відносної ширини. Щоб зробити те і інше, вам потрібно буде визначити, чи співвідношення сторін вище або нижче, ніж контейнер, і CSS не може цього зробити.
Причина в тому, що CSS не знає, як виглядає сторінка. Він заздалегідь встановлює правила, але лише після цього відбувається виведення елементів і ви точно знаєте, з якими розмірами та співвідношеннями ви маєте справу. Єдиний спосіб виявити це за допомогою JavaScript.
Хоча ви не шукаєте рішення JS, я все одно додам його, якщо комусь це може знадобитися. Найпростіший спосіб впоратися з цим JavaScript - це додати клас на основі різниці у співвідношенні. Якщо відношення ширини до висоти поля більше, ніж на зображенні, додайте клас "fillwidth", а ще додайте клас "fillheight".
$('div').each(function() {
var fillClass = ($(this).height() > $(this).width())
? 'fillheight'
: 'fillwidth';
$(this).find('img').addClass(fillClass);
});
.fillwidth {
width: 100%;
height: auto;
}
.fillheight {
height: 100%;
width: auto;
}
div {
border: 1px solid black;
overflow: hidden;
}
.tower {
width: 100px;
height: 200px;
}
.trailer {
width: 200px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
<img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
<img src="http://placekitten.com/150/150" />
</div>