Làm thế nào để ngăn chặn hình ảnh thu hẹp lại khi trang được thay đổi kích cỡ chiều ngang trong CSS

Question

Tôi có một hình ảnh 1920x100 mà được chèn ở đầu trang của tôi:

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

Tôi muốn có nó để khi trang được thay đổi kích cỡ chiều ngang, hình ảnh không thu nhỏ với trang, nhưng thay vào đó vẫn là ở trung tâm của màn hình, như thế này:

Nó có vẻ như một điều đơn giản mà có thể dễ dàng đạt được, nhưng tôi thiên đường Không tìm thấy một giải pháp.

Tôi có thể đặt hình ảnh bên trong div và đặt vị trí bên trái của div là - (1920-pageWidth)/2, nhưng điều này sẽ dựa vào JavaScript. Tôi đang tìm một giải pháp sạch hơn (nếu có), chỉ để giảm thiểu độ phức tạp trên trang và tối đa hóa khả năng tương thích của trình duyệt.

Có bất kỳ thuộc tính CSS nào mà tôi có thể sử dụng để đạt được điều này hay không, tôi có đang hoàn toàn sai khi đạt được điều này không?

Bất kỳ trợ giúp đánh giá cao.

Answer 1

Với CSS

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

Answer 2

Bạn có thể thêm tài sản css này để hình ảnh của bạn: min-width: 1280px

Answer 3

Thay vì sử dụng img yếu tố sử dụng hình ảnh giống như background-image, và vị trí trong trung tâm. Nó sẽ luôn luôn được căn giữa, nhưng có thể bị cắt bớt khi phần tử nhỏ hơn hình ảnh. Bạn cũng nên đặt lặp lại nền thành không lặp lại trong trường hợp phần tử trở nên lớn hơn.

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

Answer 4

gì về một cái gì đó như thế này. (Sử dụng một nửa chiều rộng hình ảnh cho 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;} 

Dưới đây là một fiddle chứng minh nó sử dụng một div (thay đổi chiều rộng của #wrapper): http://jsfiddle.net/mestekweb/mDkrE/

Answer 5

Chỉ cần sử dụng hình ảnh làm background-image và sử dụng background-position giá trị để đặt nó ở phần giữa của phần tử.

Xem điều này jsFiddle.