Я создал небольшой компонент, который показывает миниатюру с некоторыми кнопками, которые отображаются при наведении курсора, ничего особенного. Он отлично работает во всех браузерах, кроме IE11, потому что он меня ненавидит. Я всюду искал ответ и, похоже, не могу его выяснить.
Этот компонент берет изображение, сжимает его так, чтобы он соответствовал либо ширине, либо высоте в пределах доступного контейнера (какойзависит, является ли это альбомной или портретной фотографией), а затем центрирует изображение по горизонтали и вертикали внутри контейнера.
Я пытался использовать jquery для получения ширины, надеясь, что это нормализует его между браузерами. попробовал рефакторинг стиля и даже реорганизовал способ работы моих компонентов (хотя в любом случае этот рефактор был просрочен).
При загрузке изображения происходит событие loadImage, и в первых нескольких строках метода яЯ вижу проблему
loadImage: function (el) {
if (!el) {
return;
}
var width = el.naturalWidth;
var height = el.naturalHeight;
var parentWidth = el.parentElement.clientWidth;
var parentHeight = el.parentElement.clientHeight;
...
}
el.parentElement.clientWidth составляет 100% ширины контейнера, а не размер изображения!
Это использует vue js, но вотhtml
<div class='thumbnail-container'>
<img class='item-thumbnail' ref='imgEl'
:src='imageSource'
:style='{ width: thumbnailWidth,
height: thumbnailHeight,
"margin-left": thumbnailMarginLeft,
"margin-top": thumbnailMarginTop }'
@load='imgLoaded' />
</div>
Все рассчитывается правильно, проблема в том, что thumbnail-container - это полная ширина столбца. n в IE11, но только размер тега img внутри него в chrome, поэтому высота и ширина сбрасываются.
Это стили в thumbnail-container
.thumbnail-container {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
cursor: pointer;
}
МиниатюраСтиль родительского контейнера:
.modules-widget-thumbnail-body .modules-widget-thumbnail-cont {
height: 100%;
display: flex;
justify-content: center;
position: relative;
}
Ожидаемый результат - тег img определяет размер контейнера миниатюр, а не наоборот. Эта настройка работает в Chrome, Firefox и Edge, но не в IE11. У кого-нибудь есть идеи, что не так с моим стилем?
Примечание: Не уверен, почему это помечено как дубликат, ссылка там явно указывает на неправильный размер окна браузера, это для неправильного размера элемента, иКак уже говорилось, я уже пытался использовать методы jquery width / height без изменений
Похоже, это связано с flex, удалив отображение .module.widget: flex заставляет их отображать то же самое, но естьЛюбой способ имитировать, что Chrome делает в IE?
function imgLoaded(e) {
console.log("Width: " + e.target.parentElement.clientWidth + " Height: " + e.target.parentElement.clientHeight);
}
.module.widget .module-body {
overflow: hidden;
}
.modules-widget-thumbnail-body {
margin-left: auto;
margin-right: auto;
}
.modules-widget-thumbnail-body .modules-widget-thumbnail-cont {
height: 100%;
position: relative;
}
.thumbnail-container[data-v-537a556c] {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
cursor: pointer;
}
.modules-widget-thumbnail-body .modules-widget-thumbnail-cont img {
align-self: center;
max-width: 100%;
max-height: 100%;
cursor: pointer;
}
.module.widget {
display: flex;
flex-direction: column;
width: 100%;
background-color: #FFF;
border: 1px solid #D9DFE1;
border-radius: 3px;
overflow: hidden;
}
<div class="modules-widget-thumbnail module widget">
<div class="modules-widget-thumbnail-body module-body" style="height: 400px;">
<div id="modules-widget-thumbnail-thumbnail-1570032551907" class="modules-widget-thumbnail-cont thumbnail-view">
<div data-v-537a556c="" class="thumbnail-container" style="position: relative;">
<img data-v-537a556c="" src="https://i.imgur.com/UBPVhan.jpg" onload="imgLoaded(event)" class="item-thumbnail">
</div>
</div>
</div>
</div>