Я знайшов цю тему - Як ви розтягуєте зображення, щоб заповнити <div>, зберігаючи співвідношення сторін зображення? - це не зовсім та річ, яку я хочу.
У мене є діва з певним розміром і зображенням всередині нього. Я хочу завжди заповнювати зображення разом із зображенням незалежно від того, чи зображення є пейзажним або портретним. І не має значення, чи буде зображення відрізане (сам div має переповнення).
Тож якщо зображення є портретним, я хочу, width
щоб воно було, 100%
і height:auto
так воно залишалося пропорційним. Якщо зображення є пейзажним, я хочу, height
щоб воно було 100%
і було width to be
автоматично ". Звучить складно правильно?
<div class="container">
<img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>
Оскільки я не знаю, як це зробити, я просто створив швидкий образ того, що я маю на увазі. Я навіть не можу правильно описати це.
Отже, я думаю, я не перший, хто це запитує. Однак я не зміг знайти рішення для цього. Можливо, є якийсь новий CSS3 спосіб цього зробити - я думаю про flex-box. Будь-яка ідея? Може, це навіть простіше, ніж я очікую?