13

Можно ли сделать такое же позиционирование изображения в теге img, как это делается с помощью background-size: cover?

Видел решения с помощью object-fit, также смотрел другие вырианты, но ни один из них не работает. Можно ли сделать без object-fit?

7
  • 1
    тут предлагают много вариантов
    – Ruslan_K
    4 июл 2017 в 2:32
  • @Ruslan_K, покажите мне хоть один рабочий вариант
    – word
    4 июл 2017 в 4:34
  • допустим у изображений img разная высота. ни один пример не работает
    – word
    4 июл 2017 в 4:43
  • Без object-fit только js. А чем он не устраивает? 4 июл 2017 в 5:46
  • ассоциация: stackoverflow.com/questions/11670874
    – Alex
    6 апр 2018 в 22:37

1 ответ 1

19

Свойство object-fit работает: скорее всего, вы неправильно его применяли или смотрели в IE. Ниже привожу пример правильного использования свойства:

#bg {
    height: 100vh;
    width: 100%;
    position: relative;
}

#bg img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}
<html>
<body>
    <div id="bg">
        <img src="https://1000.tech/img/bg0.jpg">
    </div>
</body>
</html>

Суть в том, чтобы img растягивать на всю высоту и ширину родительского блока, тогда свойство object-fit: cover сработает.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.