Не удается охватить фоновое изображение для отображения в полном объеме

Question

У меня есть изображение, которое я хотел бы показать полностью, независимо от размера экрана. Я поднял изображение в Photoshop, чтобы отобразить его размер (изначально он был 4164 x 2667, поскольку он был вектором), и внес в него некоторые изменения.

Я уменьшил изображение до 1200 x 769 и сохранил его в формате PNG. Тем не менее, все изображение не отображается должным образом на моем мониторе - кажется, что оно растягивает его за пределы экрана и обрезает большую часть фона.

Вот оригинальное изображение:

и вот ссылка на код, который я использовал на jsbin для работы с ним:

http://jsbin.com/uyirah/2/edit

Вы можете видеть, что при рендеринге кода изображение отображается не полностью. Есть идеи о том, что может быть причиной этого? Мой CSS плох?

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

Answer 1

Вы указываете "cover" для background-size в вашем css. Это означает, что вы хотите, чтобы изображение масштабировалось так, чтобы оно полностью покрывало фон, даже если это обрезает часть изображения в одном измерении.

Если вы хотите, чтобы изображение в фоновом режиме показывалось как можно более крупным, попробуйте "содержать" вместо "обложка" ...