13

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

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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