Отзывчивое изображение в полноэкранном режиме и в центре - поддерживает соотношение сторон, а не окно

Итак, я хочу, чтобы img отображался

как можно больше (заполнение ширины, когда это пейзаж/высота, когда это портрет)
no crop
нет перекоса или растяжки (исходное соотношение сторон)
центрируется как по вертикали, так и по горизонтали

Кроме того, размер оригинала изображения неизвестен.

Я попробовал несколько различных вариантов для этого, включая flexbox один (чтобы получить вертикальный центр), но ничего не кажется галочкой для всех ящиков.

В идеале я бы хотел, чтобы это было все решение для CSS, но я также изучал некоторые JS.

Спасибо

Ответ 1

jsFiddle Demo

Чтобы сосредоточить его, вы можете использовать технику, показанную здесь: Абсолютное центрирование.

Чтобы сделать его как можно большим, дайте ему max-width и max-height of 100%.

.className {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    overflow: auto;
}

Ответ 2

Вы можете использовать div с фоновым изображением вместо этого свойства CSS3:

background-size: contain

Вы можете проверить пример:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain

Процитировать Mozilla:

Значение содержания указывает на то, что независимо от размера поля ввода фоновое изображение следует масштабировать так, чтобы каждая сторона была как можно больше, но не превышала длину соответствующей стороны контейнера.

Однако имейте в виду, что ваше изображение будет масштабироваться, если div больше исходного изображения.

Ответ 3

После многих проб и ошибок я обнаружил, что это решило мои проблемы. Это используется для отображения фотографий на телевизоре через браузер.

Сохраняет пропорции фотографий
Весы по вертикали и горизонтали
Центры вертикально и горизонтально
Единственное, на что нужно смотреть - это действительно широкие изображения. Они растягиваются, чтобы заполнить, но ненамного, стандартные фотографии с камеры не изменяются.

Попробуй :)

* До сих пор тестировался только в хроме

HTML:

<div class="frame">
  <img src="image.jpg"/>
</div>

CSS:

.frame {
  border: 1px solid red;

  min-height: 98%;
  max-height: 98%;
  min-width: 99%;
  max-width: 99%;

  text-align: center;
  margin: auto;
  position: absolute;
}
img {
  border: 1px solid blue;

  min-height: 98%;
  max-width: 99%;
  max-height: 98%;

  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

Ответ 4

Я пришел, чтобы указать на ответ, которого никто здесь не видит. Вы можете выполнить все ваши запросы с помощью чистого CSS, и это очень просто. Просто используйте медиазапросы. Медиа-запросы могут проверить ориентацию пользовательского экрана или окна просмотра. Затем вы можете стилизовать ваши изображения в зависимости от ориентации.

Просто установите CSS по умолчанию для ваших изображений следующим образом:

img {
   width:auto;
   height:auto;
   max-width:100%;
   max-height:100%;
}

Затем воспользуйтесь некоторыми медиа-запросами, чтобы проверить свою ориентацию и все!

@media (orientation: landscape) { img { height:100%; } }
@media (orientation: portrait) { img { width:100%; } }

Вы всегда получите изображение, которое масштабируется по размеру экрана, никогда не теряет пропорций, никогда не масштабируется больше экрана, никогда не обрезается и не переполняется.

Чтобы узнать больше об этих медиа-запросах, вы можете прочитать спецификации MDN.

Центрирование

Для центрирования изображения по горизонтали и вертикали просто используйте модель гибкого бокса. Используйте родительский div, установленный на 100% ширину и высоту, например:

div.parent {
   display:flex;
   position:fixed;
   left:0px;
   top:0px;
   width:100%;
   height:100%;
   justify-content:center;
   align-items:center;
}

Если для родительского элемента div display установлено значение flex, элемент готов к использованию модели flex box. Свойство justify-content устанавливает горизонтальное выравнивание гибких элементов. Свойство align-items устанавливает вертикальное выравнивание гибких элементов.

Заключение

Я тоже хотел этих точных требований и искал в Интернете чистое решение CSS. Поскольку ни один из ответов здесь не удовлетворяет всем вашим требованиям, будь то обходные пути или решение, принося в жертву одно или два требования, это решение действительно является наиболее простым для ваших целей; так как он отвечает всем вашим требованиям с чистым CSS.

ОБНОВЛЕНИЕ: Принятый ответ будет работать только если ваши изображения большие. Попробуйте использовать маленькие изображения, и вы увидите, что они никогда не могут быть больше, чем их первоначальный размер.

Ответ 5

yourimg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

и убедитесь, что нет родительских тегов с положением: относительный в нем