настройка изображения, а также ширины div в соответствии с размером экрана

Question

Я использую элемент div, размеры которого задаются с помощью jquery, но я хочу показать изображение в этом элементе div, а также хочу, чтобы изображение соответствующим образом изменило размеры, чтобы оно точно соответствовало элементу div.

Как это можно сделать ???

Answer 1

Если вы используете jQuery для обработки параметров элемента DIV, то вы можете использовать тот же метод для обработки высоты / ширины изображения. Вы можете попробовать что-то вроде:

var MyImg = document.getElementById(img_id);
var Div = document.getElementById(div_id);
document.MyImg.style.height = document.Div.style.height;
document.MyImg.style.width = document.Div.style.width;

Если вы хотите оставить небольшую рамку, вычтите несколько пикселей из высоты и ширины и выровняйте изображение по центру как по горизонтали, так и по вертикали.

Addon: в качестве альтернативы вы можете установить атрибуты CSS в: высота: авто; ширина: авто;

Я понял, что ты хотел использовать jQuery, мой плохой ...

Answer 2

Вам просто нужно установить изображение в качестве фона для div и установить background-size на 100%:

background: url(http://www.google.com/intl/en_com/images/srpr/logo1w.png) no-repeat;
background-size: 100%;

Рабочий пример (поиграйтесь с шириной div, если хотите):

http://jsfiddle.net/KWKuG/

Answer 3

Не уверен, если вы действительно хотите наклонить изображение таким образом, но вы можете просто установить это с помощью css.

#yourDiv img { width: 100%; height: 100%}

пример: http://jsfiddle.net/Shx3z/1/

Answer 4

Вы можете установить максимальную ширину и высоту 100% для изображения с помощью CSS:

img {
max-width:100%;
max-height:100%;  
}

Таким образом, вы будете поддерживать соотношение сторон изображения.