MrSteep
@MrSteep
ленивый

Как сделать пропорциональное заполнение картинкой?

Как заставить картинку внутри div'а, вести себя так же, как если бы она была фоновым изображением с background-size: cover?

Пример для изучения. Понимаю, что придется использовать скрипты, но не очень понимаю как это считать.

И еще один пример
  • Вопрос задан
  • 370 просмотров
Решения вопроса 1
mihdan
@mihdan
WordPress-евангелист, ведущий РНР - разработчик
object-fit вам в помощь, для старых браузеров используйте полифил.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
bingo347
@bingo347 Куратор тега JavaScript
Бородатый программер
для img в стилях прописать:
.wrapper__image img {
    max-width: 100%;
    max-height: 100%;
}
Ответ написан
@Cyber_bober
Надо привязаться к какому-либо параметру. Допустим, выставить ей высоту, равную высоте контейнера. А по горизонтали скрывать все что не влазит.
Ответ написан
@Defff
Скриптовый Вариант:
<style>
.wrapper__image {
  background: #fbfbfb;
  margin: 50px;
  display: inline-block;
  width: 270px;
  height: 420px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 10px 20px 70px -18px rgba(0, 36, 100, 0.12);
}
.wrapper__image img:not(.longwidth) {
    width: 100%;
    height:auto;
}
.wrapper__image img.longwidth {
    height: 100%;
    width:  auto;
}
</style>
<script type="text/javascript">
function isLongWidth (that){
  if(that.width>that.height)that.className = "longwidth";
}
</script>
<div class="wrapper__image"><img src="https://d13yacurqjgara.cloudfront.net/users/182238/screenshots/2604379/12-fire.jpg" onload="isLongWidth(this)"></div>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы