У меня есть div, 200px на 200px.Размер фонового изображения?
Это фоновое изображение 500px x 500px.
Есть ли способ убедиться, что все фоновое изображение вписывается в div? Я знаю, что вы можете настроить его с помощью CSS3, но я ищу решение для старых браузеров.
Благодаря
Есть ли способ, чтобы убедиться, что все фоновое изображение помещается в DIV?
Я знаю, что вы можете оценить его с помощью CSS3, но я ищу решение для старых браузеров.
Нет другого стандартного способа масштабирования фонового изображения.
Старые версии Internet Explorer могут быть поддержаны через non-standard filter property и AlphaImageLoader.
/* Untested */
background-image: url(images/someimage.png);
background-resize: cover;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";
В качестве альтернативы, как взломать, вы могли бы использовать <img> элемент, и абсолютно позиционировать его за содержание. Это будет изображение , хотя это не будет чистым взломом.
Предположим, что ваш div имеет id равный «myid».
картинка используется как размер имеет 500x500
Демо: http://jsfiddle.net/abdennour/rhPDx/
div#myid{
width: 200px;
height:200px;
background: url('http://px6.streetfire.net/0001/72/25/1952752_600.jpg')
0% 0%
no-repeat;
background-size: 200px 200px;
}
Это будет * позиция * изображение, а не изменить его размер. – Quentin
Вы не можете изменить размер изображения в ур атрибут Backgound изображения.
Есть и другой, сложный способ сделать это. Просто поместите свое фоновое изображение в свой div и добавьте к нему абсолютную позицию. Ofc ur div должен иметь относительный атрибут позиции.
После этого вы можете изменить размер изображения ур, просто с помощью css2.
Вы можете достичь того же, применяя background-size:100% 100%; к вашему div
Надеется, что это поможет
изображения уже имеет соотношение сторон 1: 1. Что мешает вам изменить размер изображения в Photoshop? – Jawad
Что сказал Джавад. Но если вам нужно динамически изменять размер изображения на лету и поддерживать правильное соотношение сторон, вы можете прочитать http://selbie.wordpress.com/2011/01/23/scale-crop-and-center-an-image -with-correct-aspect-ratio-in-html-and-javascript – selbie
Спасибо за ссылку @selbie – Jawad