У меня есть фоновое изображение на теле моей веб-страницы. Я использовал background-size:cover, чтобы изображение растягивалось по всему телу, сохраняя пропорции изображения. Я бы хотел, чтобы это было одинаково для IE7 + IE8.
Я просмотрел и увидел следующий код:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='AutumnWinter_4.jpg',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='AutumnWinter_4.jpg',
sizingMethod='scale')";
Но это не сохраняет соотношение сторон, что очень плохо для веб-сайта, на который мы стремимся.
Есть ли способ сделать это? Без удара jQuery?
backgroundSize.js на самом деле не растягивает bg-изображение в IE7, кажется, просто центрирует его на исходный размер. Посмотрите их demo и нажмите "Проверить, что обычно видят пользователи IE6-7-8".
@danRhul
Я читал, что backstretch будет работать в IE7 +
Удачи!
В чем причина не использования jQuery? Вы можете загрузить его в условных комментариях только для IE<8, так что для любого другого современного браузера jQuery не загружается.
Также подумайте, что IE7 имеет очень низкую рыночную долю (2,52%, апрель 2012), поэтому может быть приемлемо загрузить ~ 25kb дополнительно для этого конкретного браузера если эта функция настолько важна для вашего сайта/приложения.
Итак, я нашел этот плагин для jQuery: https://github.com/louisremi/jquery.backgroundSize.js
A jQuery cssHook добавляет поддержку "обложки" и "содержит" к IE6-7-8, в 1.5K
Подробнее см. страницу проекта Github.
Вы можете просто подделать фоновое изображение с фактическим изображением. Это немного больше редактирования HTML и, конечно, не идеально, но с тех пор, когда обработка IE всегда была идеальной?
<body>
<img id="mainBG" src="mainBG.jpg" />
<div id="content">
[ ... ]
Затем соответствующим образом нарисуйте
body{
position:relative;
}
#mainBG{
width:100%
position:absolute;
top:0px;
left:0px;
}
Должен быть кросс-браузер, если я не ошибаюсь.
Я использовал следующее (http://css-tricks.com/perfect-full-page-background-image/), и он хорошо работает в ie7.
HTML:
<body>
<img class="bg" src="filename">
</body>
CSS:
.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
Я знаю, что это старый вопрос, но я подумал, что поделюсь решением, которое я придумал для всех, кто нашел этот вопрос в google, как и я.
Я пытался получить изображение для покрытия фона сайта и столкнулся с этим вопросом, однако ни один из решений не работал у меня. Я придумал это вместо:
HTML: переместите фоновое изображение на <img />, сделайте это первым в своем <body>.
<html>
<body>
<img class="background" src="kitty.jpg" />
<div class="content">
...
CSS: создайте фон под содержимым, установите его min-width/height на 100%.
html {
height: 100%
}
body .background {
position: absolute;
z-index: -1;
min-height: 100%;
min-width: 100%;
}
Здесь min-height и min-width, который делает магию. Не указывайте изображение ширину и высоту в HTML или CSS, или соотношение сторон изменится.
Вышеупомянутое будет работать для IE7 и IE8. Если вы хотите поддержать IE6, вы можете установить резервное копирование с центрированным изображением следующим образом:
CSS: Если IE6, не показывайте изображение, используйте вместо него фоновое изображение.
body {
_background: url("kitty.jpg") 50% top no-repeat;
}
body .background {
_display: none;
}
(Примечание. Если вам не нравится, когда подстрочный знак подчеркивания IE6, вы можете вместо этого использовать условные обозначения - что делает HTML5 Boilerplate.)
К сожалению, большинство решений этой проблемы либо зависят от css3, либо игнорируют встроенную функциональность "обложки", которая сохраняет исходное соотношение сторон изображения. https://github.com/louisremi/background-size-polyfill должен сохранять соотношение, но я никогда не смог бы заставить его работать полностью, когда растягивает браузер определенным образом (ошибка оператора, m sure:-)). Чтобы решить эту проблему, я написал jquery script, который я тестировал на сафари, хром, ff и ie8+. Вы заметите, что вам нужно будет использовать img, помещенную абсолютно вместо css background-image. Просто добавьте bgImg как id в тег в html.
CSS:
.container { height: auto; overflow:hidden; position:relative;}
.container #bgImg { position:absolute; z-index:-1;}
Селектор изображений должен быть установлен абсолютно, чтобы заставить его сидеть за контентом. Это означает, что вы являетесь родительским контейнером, который должен иметь позицию: относительный, а затем переполненный: скрытый, так что любые переполнения с изображения (поскольку вы поддерживаете соотношение, некоторые части его неизбежны) скрыты. Имейте в виду также, что определенные теги отображения в родительском контейнере нарушают скрытие переполнения.
Jquery:
$(window).load(function () {
// only do this once and pass as function parameters, because chrome
// and safari have trouble not only with document.ready but window.resize
var img = new Image();
img.src = $("#bgImg").attr('src');
var $width_orig = img.width;
var $height_orig = img.height;
resizeBGImage($width_orig, $height_orig);
$(window).resize(function () {
resizeBGImage($width_orig, $height_orig);
});
});
function resizeBGImage($width_img_orig, $height_img_orig) {
// get dimensions of container
var $width_container = $('.container').outerWidth();
var $height_container = $('.container').outerHeight();
// calculate original aspect ratio and ratio of the container
var $imageratio = $width_img_orig / $height_img_orig;
var $containerratio = $width_container / $height_container;
var $wdiff = $width_container - $width_img_orig;
var $hdiff = $height_container - $height_img_orig;
// original size, so just set to original
if (($wdiff == 0) && ($hdiff == 0)) {
$("#bgImg").css('width', $width_img_orig);
$("#bgImg").css('height', $height_img_orig);
}
// if container is smaller along both dimensions than the original image,
// set image to container size
else if (($wdiff < 0) && ($hdiff < 0)) {
$("#bgImg").css('width', $width_img_orig);
$("#bgImg").css('height', $height_img_orig+1); // adding one because chrome can't do math
}
// if container is wider than long relatiave to original image aspect ratio
// set width to container width and calculate height
else if ($containerratio > $imageratio) {
$("#bgImg").css('width', $width_container);
// calculate height using orig aspect ratio and assign to image height
$("#bgImg").css('height', (($width_container * $height_img_orig) / $width_img_orig) + 1); // adding one because chrome can't do math
}
// else container is taller than long relatiave to original image aspect ratio
// set height to container height and calculate width
else {
// set the image height to container height
$("#bgImg").css('height', $height_container + 1); // adding one because chrome can't do math
// calculate width using orig aspect ratio and assign to image width
$("#bgImg").css('width', (($height_container * $width_img_orig) / $height_img_orig));
}
$("#bgImg").css('left', (($width_container - $("#bgImg").width()) / 2).toString() + 'px');
};
Обратите внимание на использование $(window).load() вместо $(document).ready(). У Chrome и сафари, кажется, есть проблемы с последним, поскольку в этих браузерах фоновое изображение может быть не полностью загружено, когда DOM. Использование $(window).load() гарантирует, что все элементы окна будут установлены до запуска script.
После долгих проб и ошибок, лучшее решение угадывало это!
Следующие работали для меня.
body {
background-size:100%;
}
У меня была похожая проблема. Я решил это только с помощью CSS.
В основном, Object-fit: cover помогает вам решить задачу поддержания соотношения сторон при размещении изображения внутри div.
Но проблема заключалась в Object-fit: cover не работала в IE, она занимала 100% ширины и 100% высоты, а соотношение сторон было искажено. Другими словами, эффекта увеличения масштаба изображения не было, что я видел в Chrome.
Подход, который я выбрал, состоял в том, чтобы расположить изображение внутри контейнера с абсолютным, а затем поместить его прямо в центр, используя комбинацию
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Как только это в центре, я даю изображение,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
Это заставляет изображение получить эффект Object-fit: cover.
https://jsfiddle.net/furqan_694/s3xLe1gp/
Эта логика работает во всех браузерах.
У вас есть два варианта для достижения этого только с помощью CSS:
Object-fit: cover. Единственная проблема с этим состоит в том, что это не будет работать во всех браузерахПоместите изображение внутри контейнера с абсолютным, а затем поместите его прямо в центре, используя комбинацию:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Примечание. Поскольку преобразование работает ТОЛЬКО из IE9, вы можете использовать фильтры. Вот ответ для этого.
Как только он в центре, вы можете сделать,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
Это заставляет изображение получить эффект Object-fit: cover.
Похоже, вам нужен "прокладка" или "polyfill", например "Модернизатор": http://modernizr.com/docs/#html5inie