jQuery <div>фоновое изображение в полном размере растянуть

Question

По сути, я пытаюсь воссоздать этот сайт с чистым HTML, CSS и jQuery.

В настоящее время сайт не очень хорошо работает в результатах поиска, очевидно, потому что это Flash, поэтому я пытаюсь это исправить.

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

Вот что мне нужно.В основном это изображение DIV, о котором я беспокоюсь ...

• У меня есть два DIV, один из которых будет содержать изображение, а другой будет содержать ссылки под ним.Верхний DIV имеет высоту 70%, а второй 30%.
• Изображение в верхнем DIV 70% должно растягиваться до , по крайней мере, заполнить DIV.Под этим я подразумеваю, что вокруг изображения не должно быть пустого пространства, но очевидно, что изображение должно также сохранять свое соотношение сторон.
• Если возможно, я бы хотел, чтобы несколько изображений могли вращаться в этом DIV.с простым эффектом затухания, возможно загружаемым из файла XML (но не обязательно).

Это у меня над головой или это легко сделать?

Спасибо за любую помощь вамможет дать.

Answer 1

html

<div id="first">
    <img src="http://api.ning.com/files/HX-j3*PqLLSnezU7hpKPxnpTBF6CprX1BsCZ7AQZDuA2gNOgBgOr6md3zvtnmRxULlNmSpzuh49ycB3VNqtSifGoE3TzUAyS/aishwaryaraiface.jpg">
</div>

css

html,body {height:100%}
#first {height:70%;overflow:hidden;}
img {width:100%}

Демонстрация: http://jsfiddle.net/wMvh6/

Идея состоит в том, чтобы использовать тег img и сделать его width 100%.Он сохранит соотношение сторон и заполнит всю ширину родительского элемента div.

Answer 2

Вы также можете использовать свойства CSS background-size и background-position, не записывая ни одной строки jQuery.Например:

#first {
    background-image: url('URL-to-image');
    background-size: cover;
    background-position: center;
}

Это обеспечит заполнение изображения # first div.