Какой простой способ создать полноэкранную галерею img?

Question

Я пытаюсь создать простую (но) полноэкранную галерею IMG и принял первое решение из этой статьи.

Итак, код:

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

И у меня есть JS-код, чтобы изменить (onclick) фон attr html - это работает.

Два вопроса:

• Как насчет качества изображения на мониторе размером более 1024x768 (это размер моего монитора и размер всех изображений)

• Как насчет пропорций img на мониторе с другим соотношением сторон? Изображение, вероятно, будет выглядеть деформированным?

Есть ли какое-нибудь простое (css или jquery решение)?

Answer 1

Качество изображения может быть таким же хорошим, как и изображение, которое вы загружаете. То есть, если ваше изображение 1024x768, оно будет отлично смотреться на любом изображении с разрешением или ниже. В браузерах или дисплеях с более высоким разрешением изображение будет масштабироваться, растягивая пиксели размером более 1:1 и вызывая некоторую потерю качества. Я бы посоветовал вам использовать самые большие изображения, которые вы можете, или использовать @media запросы для предоставления больших изображений на большие дисплеи и меньшие изображения на меньшие, чтобы сэкономить время загрузки.

Во-вторых, директива cover для background-size предназначена для решения проблем с соотношениями сторон и размерами, позволяя браузеру отображать максимальное количество вашего изображения в правильном соотношении в доступном пространстве. Не могли бы вы подробнее рассказать о вашей проблеме?