Вопрос по html, css, css3 – Заставьте изображение соответствовать и сохранить соотношение сторон

9

Я хочу, чтобы изображение заполняло 100% ширины его контейнера, и я хочу, чтобы для него было установлено свойство max-heigth, все это сохраняя соотношение сторон, но позволяя потерять любую часть изображения.

img {
   max-height:200px;
   width:100%;
}

Я знаю, что подобное можно сделать сbackground-size собственность, но я хочу сделать это встроенным<img> тег.

Любая идея о том, как я могу добиться этого с помощью CSS? или JavaScript?

Ваш Ответ

2   ответа
0

используя css flex properties. Пожалуйста, смотрите код ниже

.img-container {
  width: 150px;
  height: 150px;
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}
<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

39

object-fitи увидеть поддержку браузератаблицы.

CSS3object-fit/object-position Метод указания того, как объект (изображение или видео) должен помещаться внутри своего поля. Параметры подгонки объекта включают «содержать» (подгонка в соответствии с соотношением сторон), «заливка» (растягивает объект, чтобы заполнить) и «покрытие» (переполняется окно, но сохраняет соотношение), где положение объекта позволяет переместить объект, как background- изображение делает.

JSFIDDLE DEMO

.container {
  width: 200px; /*any size*/
  height: 200px; /*any size*/
}

.object-fit-cover {
  width: 100%;
  height: 100%;
  object-fit: cover; /*magic*/
}
<div class="container">
  <img class="object-fit-cover" src="https://i.stack.imgur.com/UJ3pb.jpg">
</div>

Связанная информация:

Изучение подгонки объектов ★ Mozilla Hacks

Свойство Polyfill для CSS-объекта

подгонка объекта: крышка; это волшебство действительно: D matasoy

Похожие вопросы