Исправление IE и Edge для подгонки объекта: обложка;
Я использую object-fit: cover; в моем CSS для изображений на конкретной странице, потому что они должны придерживаться одного и того же height, Это прекрасно работает в большинстве браузеров.
Но при масштабировании моего браузера в IE или Edge размер изображения изменяется в width (не height) вместо увеличения. Изображение теряет форму.
Какое правило CSS я могу использовать, чтобы это исправить?
Вот эта страница
7 ответов
.row-fluid {
display: table;
}
.row-fluid .span6 {
display: table-cell;
vertical-align: top;
}
.vc_single_image-wrapper {
position: relative;
}
.vc_single_image-wrapper .image-wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}<div class="vc_single_image-wrapper vc_box_border_grey">
<div class="image-wrapper" style="background-image: url(http://i0.wp.com/www.homedecor.nl/wp-content/uploads/2016/03/Gordijnen-Home-Decor-2.jpg?fit=952%2C480;"></div>
</div>попробуйте это, оно должно работать. также удалить поплавок из .row-fluid .span6
У меня была похожая проблема. Я решил это только с помощью CSS.
В принципе 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. Ниже приведен пример:
// This is the div containing image
.card-b123 .image-wrapper {
height: calc(100% - 4.5em); // Your image container element dimensions
width: 100%;
}
// My image inside the above div wrapper
.card-b123 .image-wrapper img {
top: 50%;
left: 50%;
position: relative;
transform: translate(-50%, -50%);
}
Теперь, в моем случае, у меня было две плитки, одна была горизонтальной (1x2), а другая - вертикальной (2x1), в обеих я хотел выглядеть object-fit:cover,
Для вертикального блока я добавил:
.card-b123 .image-wrapper img.vertical {
height: 100%;
width: auto;
}
До (Исходное изображение): Исходное изображение, После: Вертикальный блок плитки
Для горизонтального блока плитки я добавил:
.card-b123 .image-wrapper img.horizontal {
height: auto;
width: 100%;
}
До (Исходное изображение): Исходное изображение, После: Горизонтальный блок плитки
У меня это прекрасно работало во всех браузерах:)
Нет никаких правил для достижения этого, используя только CSS, кроме object-fit (который вы используете в настоящее время), который имеет частичную поддержку в EDGE1, поэтому, если вы хотите использовать это в IE, вы должны использовать объектно-подобранный полифилл на тот случай, если вы хотите использовать только элемент imgВ противном случае вы должны сделать некоторые обходные пути.
Вы можете увидеть object-fit поддержка здесь
ОБНОВЛЕНИЕ (2018)
1 - EDGE теперь частично поддерживает object-fit начиная с версии 16, и частично, это означает, что работает только в img элемент (будущая версия 18 все еще имеет только частичную поддержку)
Я только что использовал @misir-jafarov и сейчас работаю с:
- IE 8,9,10,11 и обнаружение EDGE
- используется в Bootrap 4
- взять высоту своего родительского div
- закреплено вертикально на 20% сверху и горизонтально на 50% (лучше для портретов)
вот мой код:
if (document.documentMode || /Edge/.test(navigator.userAgent)) {
jQuery('.art-img img').each(function(){
var t = jQuery(this),
s = 'url(' + t.attr('src') + ')',
p = t.parent(),
d = jQuery('<div></div>');
p.append(d);
d.css({
'height' : t.parent().css('height'),
'background-size' : 'cover',
'background-repeat' : 'no-repeat',
'background-position' : '50% 20%',
'background-image' : s
});
t.hide();
});
}
Надеюсь, поможет.
Вы можете использовать этот код JS. Просто поменяй .post-thumb img с вашим img,
$('.post-thumb img').each(function(){ // Note: {.post-thumb img} is css selector of the image tag
var t = $(this),
s = 'url(' + t.attr('src') + ')',
p = t.parent(),
d = $('<div></div>');
t.hide();
p.append(d);
d.css({
'height' : 260, // Note: You can change it for your needs
'background-size' : 'cover',
'background-repeat' : 'no-repeat',
'background-position' : 'center',
'background-image' : s
});
});
Я добился удовлетворительных результатов с:
min-height: 100%;
min-width: 100%;
таким образом вы всегда сохраняете соотношение сторон.
Полный CSS для изображения, которое заменит "object-fit: cover;":
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
right: 50%;
transform: translate(50%, 0);
родительский div:
height: 584px;
display: block;
background-position: center center;
background-size: cover;
width: 100%;
position: absolute;
overflow: hidden;
background-color: #fff;
ребенок img
object-position: center center;
min-height: 100%;
display: block;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
width: auto;
min-width: 100%;
max-width: none;
-o-object-fit: cover; // you can keep them for modern browsers
object-fit: cover; // you can keep them for modern browsers
height: 100%;
скрипка: http://jsfiddle.net/j6hLaxz8/