Как остановить сжатие изображения при горизонтальном изменении страницы в CSS

У меня есть изображение 1920x100, которое вставлено в верхней части моей страницы:

<img src="./Resources/Images/banner.jpeg" style="position:absolute; top:0px; left:0px; height:100px; width:100%;" name="top">

Я хотел бы иметь его так, чтобы при изменении размера страницы по горизонтали изображение не уменьшалось со страницы, а оставалось в центре экрана, например:

Кажется, что простая вещь, которую можно легко достичь, но я не нашел решения.

Я мог бы поместить изображение внутри div и установить левую позицию div как (1920-pageWidth)/2, но это будет полагаться на JavaScript. Я ищу более чистое решение (если оно есть), просто чтобы свести к минимуму сложность страницы и увеличить совместимость с браузером.

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

Любая помощь была оценена.

Ответ 1

С CSS

div {
  background: url(./Resources/Images/banner.jpeg) no-repeat scroll center top transparent;
  height: 100px;
}

Ответ 2

Вы можете добавить это свойство css к своему изображению: min-width: 1280px

Ответ 3

Что-то вроде этого. (используйте половину ширины изображения для margin-left)

HTML:

<div id='wrapper'>
  <img src='./Resources/Images/banner.jpeg' id='banner'>
</div>

CSS

#wrapper{overflow:hidden;position:relative;}
#banner{position:absolute;top:0;left:50%;margin-left:-960px;}

Здесь скрипка, демонстрирующая это с помощью div (измените ширину #wrapper): http://jsfiddle.net/mestekweb/mDkrE/

Ответ 4

Просто используйте изображение как background-image и используйте значение background-position center 0, чтобы поместить его в центральную вершину элемента.

Смотрите jsFiddle.

Ответ 5

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

div { 
  background: url(/to/img) no-repeat 50% 0;
  margin: 0 auto;
}