Блог

Главная - Вопросы по программированию - Обернуть img внутри flexbox с помощью div

Обернуть img внутри flexbox с помощью div

#html #css #flexbox #object-fit

#HTML #css #flexbox #подгонка объекта

Вопрос:

У меня есть следующий код для имитации object-fit:contain совместимости с IE.

 .cbs-Item {
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  height: 500px;
}

.cbs-Item img {
  flex-shrink: 0;
  max-width: 100%;
  max-height: 100%;
}

.cbs-Item img:hover {
  opacity: 0.5;
}  
 <div class="cbs-Item">
  <img src="https://www.imgacademy.com/themes/custom/imgacademy/images/helpbox-contact.jpg" />
</div>

Я хочу обернуть img внутри div, чтобы все выглядело одинаково. Как я могу этого добиться?

Комментарии:

1. кстати, flexbox не поддерживается в IE 🙂

2. Итак, вы хотите, чтобы серый фон не отображался на экране и был скрыт?