Изменение размера фоновых изображений

Это действительно для информационных и учебных целей, в то время как вы узнаете больше о JavaScript и CSS. У меня есть индексная страница локального браузера, на которой я хочу повернуть фоновое изображение. Осмотрев и играть с различными решениями, я остановился на этом для базовой функциональности ЧередоватьИзменение размера фоновых изображений

<html> 
<head> 
<script language="javascript" type="text/javascript"> 
function rotate() 
{ 
    var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg"); 
    var aImg = Math.floor(Math.random()*imgArray.length); 
    var img = imgArray[aImg]; 
    document.body.style.background = "url(" + img + ") no-repeat"; 
    document.body.style.backgroundSize = "cover"; 
} 
</script> 
</head> 
<body onload="rotate()"> 
</body> 
</html>

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

Я много искал, и единственные реальные рабочие решения, которые я нашел, полагаются на выбор элемента по идентификатору, но это также требует, чтобы изображение ассоциировалось с идентификатором, например, в IMG-свойстве в HTML код. Здесь изображение выбирается и устанавливается в JavaScript с помощью CSS.

Я попытался установить размеры изображения с img.width/img.height и img.style.width/img.style.height, а также несколько других случайных решений, я сталкивался, но всякий раз, когда я пытаюсь изменить эти изображения либо не меняется, либо нет показать вообще.

function rotate() 
{ 
    var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg"); 
    var aImg = Math.floor(Math.random()*imgArray.length); 
    var img = imgArray[aImg]; 
    image = rsize(img); 
    document.body.style.background = "url(" + image + ") no-repeat"; 
    document.body.style.backgroundSize = "cover"; 
} 
function rsize(image) 
{ 
    image.style.width = "300px"; 
    image.style.height = "300px"; 
    return image; 
}

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

Заранее спасибо.

источник

2012-06-07 jb11

Вы должны установить image.style.width и image.style.height на фактическое изображение объекта DOM, а не на URL-адрес, который вы сейчас пытаетесь сделать.

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

Вы можете использовать свойство CSS background-size, но это довольно новое и не поддерживается в версиях IE до IE9. Если вы использовали это, вы бы установили для этого фактический размер, а не "cover".

Вы также можете использовать фактическое изображение DOM, а затем представить это изображение DOM как центрированное на вашей странице, если это то, что вы действительно пытаетесь сделать.

Например, вот как создать объект DOM изображения, присвоить ему URL, установить его размер и вставьте его на страницу:

var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg"); 
var aImg = Math.floor(Math.random()*imgArray.length); 
var imgURL = imgArray[aImg]; 
var img = new Image(); 
img.src = imgURL; 
img.style.width = "300px"; 
img.style.height = "300px"; 
img.id = "centeredImage"; 
document.body.appendChild(img);

Вы можете затем использовать CSS в положение находится в центре если хотите.

Работа демы здесь: http://jsfiddle.net/jfriend00/jqMtV/

источник

2012-06-07 17:02:40 jfriend00

Вы можете, но не с Img элементов ... – Bergi

Это похоже на один из решения, которые я пытался раньше, но без 'appendChild'. Но он не работает с элементами изображения. Это по-прежнему хорошая информация для меня, спасибо. – jb11

@ jb11 - Я исправил опечатку в своем примере кода. Я также внедрил рабочую демонстрацию, где вы можете увидеть CSS, который также центрирует изображение: http://jsfiddle.net/jfriend00/jqMtV/ – jfriend00

Нет, у вас нет <img> элементов, которые вы могли бы (повторно) размер (кстати, они не будут нуждаться в иде быть по выбору). Ваше использование rsize(imgArray[aImg]) работает с элементами массива, которые представляют собой строки, а не элементы DOM, поэтому значение параметра для их несуществующего свойства style вызовет ошибку.

Тем не менее, вы уже на правильном пути с использованием backgroundSize style property. Просто не устанавливайте его на cover, но до нужного вам размера!

document.body.style.backgroundSize = "300px 300px";

Если вы хотите использовать <img> элемент, добавьте это в конце вашего <body>:

<img src="some.jpg" style="position:fixed; z-index:-1; width:100%; height:100%" />

источник

2012-06-07 17:04:59 Bergi

Недостаток 'backgroundSize' - это тот, который не поддерживается в IE до IE9. – jfriend00

Он уже использует его, поэтому я уверен, что все в порядке ... – Bergi

Я в основном использую Firefox, для которого я использую эту настраиваемую страницу индекса. Как я уже сказал, свойство покрытия в значительной степени позаботилось о моей проблеме, но меня все еще интересовало альтернативные методы решения проблемы. Но это определенно хорошая информация. Благодарю. – jb11

Изменение размера фоновых изображений

ответ

Смежные вопросы