Question

我在.backdiv img{ height:100%; width: 100%; display: block; object-fit:cover;中有一张图片。图像设置为填充屏幕并使用以下css从中心缩放

object-fit

}

在chrome / safari / firefox上一切正常。在IE 11上，图像的宽高比不会保持，因为图像被强制为100％宽度和100％，$clinNameQ = "SELECT * FROM medications RIGHT JOIN patientData ON patientData.medID=medications.medID WHERE patientData.ID='$user'";被忽略，因为11不支持它。

我如何在11

上实现同样的目标

Answer 1

你可以取消img元素并设置包含div的背景样式

<div id="divbackground" style="position:ablsolute;top:0;left:0;bottom:0;right:0;background-image:url(myimage.png);background-size:fill">

使用＆＃39; natural＆＃39;制作img元素渲染。纵横比，只需将其宽度或高度样式指定为100％，而不是两者......例如。

Answer 2

这是一个老问题，但是我遇到了一个完全相同的烦人的问题，即Chrome / Edge一切正常，但是IE11中的某些CSS属性无法正常工作，我最终使用HTML“ figure”元素解决了所有问题。

以下代码强制缩小图像（不更改原始宽高比）。

<figure class="figure-class">

<img class="image-class" src="{{photoURL}}" />

</figure>

和CSS类：

.image-class {
    border: 6px solid #E8E8E8;
    max-width: 189px;
    max-height: 189px;
}

.figure-class {
    width: 189px;
    height: 189px;
}

Answer 3

最近遇到了同样的问题，这是我的解决方案：

.backdiv {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.backdiv img {
  position: absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
}

它看起来和object-fit: cover;一模一样。使用 flex 布局使图像居中，您可以通过更改 justify-content 和 align-items

来更改图像位置

Answer 4

if ('objectFit' in document.documentElement.style === false) {
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll("img").forEach(function (image) {
            if (image.currentStyle['object-position'] || image.currentStyle['object-fit']) {
                (image.runtimeStyle || image.style).background = "url(\"".concat(image.src, "\") no-repeat ");
                if (image.currentStyle['object-fit'])
                    (image.runtimeStyle || image.style).backgroundSize = image.currentStyle['object-fit'];
                if (image.currentStyle['object-position'])
                    (image.runtimeStyle || image.style).backgroundPosition = image.currentStyle['object-position'];
                image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(image.width, "' height='").concat(image.height, "'%3E%3C/svg%3E");
            }
        });
    });
}

这里有一个解决方法来找到所有具有对象适合和对象位置的图像

对象适合11的替代方案

4 个答案: