我想使用object-fit
CSS规则。
MSIE和MS Edge浏览器不支持此功能。
虽然IE有一些多边形填充,但据我所知,没有一个可以在Edge中工作。
例如,Jonathan Neal的polyfill fitie可以在IE上运行,但不能在Edge上运行(至少在我的机器上不能)。这是因为fitie使用了element.currentStyle
和element.runtimeStyle
,这两个JS对象只有MS,在Edge浏览器中不再支持。但是如果我使用window.getComputedStyle(element).getPropertyValue('object-fit')
,Edge什么也不会返回。
因此,如何在MS Edge browser中使用JavaScript获取object-fit
规则的CSS规则的值?
img = document.getElementById('i');
s = self.getComputedStyle(img);
console.log('object-fit: ', s.getPropertyValue('object-fit'));
console.log('-ms-object-fit: ', s.getPropertyValue('-ms-object-fit'));
div {
width: 400px;
height: 320px;
overflow: hidden;
}
#i {
display: block;
width: 100%;
height: 100%;
-ms-object-fit: cover;
object-fit: cover;
}
div {
box-sizing: border-box;
border: 1px solid gold;
}
div,
p {
font-family: sans-serif;
font-size: 20px;
width: 400px;
margin: 0 auto;
}
<p>img: Has object-fit CSS rule, but does not appear in MS Edge JavaScript log</p>
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
编辑
这肯定是可能的,因为它并没有被完全忽略。
开发人员工具显示卷曲带下划线的规则
奖励问题:
是否有适用于边缘的object-fit的多边形填充?
发布于 2017-07-25 19:03:51
您应该能够直接引用它:
// 'Fill' in Chrome and undefined in Edge
console.log('object-fit',
window.getComputedStyle(document.querySelector('.test')).objectFit);
// 'rgb(255,0,0)' in both
console.log('color',
window.getComputedStyle(document.querySelector('.test')).color);
.test{ color: red; }
<div class="test">test</div>
该样式属性在不支持它的浏览器(如Edge)中将是undefined
,即使使用polyfill也是如此。
问题是,就边缘而言:没有object-fit
规则。当Edge解析CSS时,它无法识别规则,只是跳过它。如果您用其他属性或JS填充行为,这并不会改变Edge只是不知道它的事实。
因此,在回答“如何在MS Edge浏览器中使用JavaScript获取CSS规则对象匹配规则的值?”您可以执行window.getComputedStyle(ele).objectFit
来获取值,并且它始终是undefined
(即使成功地进行了填充)。
对于额外的问题: Edge支持background-size: cover
,因此您应该能够将图像设置为display:inline-block
元素的CSS背景,并获得您想要的行为。您可以相当容易地将<img>
替换为带样式的<div>
...
var img = document.querySelector('.i');
// If object-fit missing
if (!window.getComputedStyle(img).objectFit) {
// Create a div
var div = document.createElement('div');
div.className = img.className;
// Set the background image to be the source
div.style.backgroundImage = 'url(' + img.src + ')';
// Set background-size to the object-fit we want
div.style.backgroundSize = 'cover';
// Swap them
img.parentNode.replaceChild(div, img);
}
.test {
width: 400px;
height: 320px;
overflow: hidden;
border: 1px solid red;
}
.i {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="test">
<img src="https://dummyimage.com/640x240/333/444.png" class="i" /></div>
这只是基本思想--像object-fit-images这样的填充程序更进一步,并且支持像object-position
这样的附加属性。
或者(对于更多的超文本标记语言),您可以保留<img>
标记并将其包装在一个容器中,该容器的行为类似于对其应用object-fit
。这就是object-fit-polyfill所做的。
两个垫片都应该在Edge中起作用。
发布于 2017-07-25 22:30:05
我想使用适合对象的
规则。
您不需要在MS Edge浏览器中使用JavaScript获取CSS规则object-fit
规则的值,即可使img
覆盖其父级。
额外的好处:不需要使用polyfill,可以在所有浏览器上运行,甚至可以在IE9上运行
附注,MS Edge版本。16支持object-fit
这里有一个使用transform: translate
和min-width/height
的解决方案,它与object-fit: cover
完全一样。
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
}
#i {
position: relative;
display: block;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
如果需要,还可以使用CSS @supports重置上述属性并添加object-fit
。
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
}
#i {
position: relative;
display: block;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
@supports (object-fit: cover) {
#i {
min-width: auto;
min-height: auto;
top: auto;
left: auto;
transform: none;
width: 100%;
height: 100%;
object-fit: cover;
}
}
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
当因为要在标记中设置图像源而需要使用img
时,另一个被忽视的选择是对background-image
源使用内联样式。
鉴于这样的事实,在这种情况下,具有固定宽度/高度的div
设置图像的边界,下面是一个简单的示例。
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
background-position: center;
background-size: cover;
}
<div style="background-image: url(https://dummyimage.com/640x240/333/444.png)">
</div>
已更新
当然,您也可以模仿object-fit: contain
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
}
#i {
position: relative;
display: block;
max-width: 100%; /* changed to max */
max-height: 100%; /* changed to max */
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
基于注释更新的
当涉及到为video
模拟object-fit
时,事情变得复杂得多。
video
元素的响应方式与图像不同。
这里有4个不同的示例,展示了一些视频在模仿cover
时工作,而另一些视频在模仿contain
时工作
带有更大方形
的更方形的视频容器
要获得与图像一致且同样好的效果,需要运行一个小脚本来获取视频的纵横比,然后根据其及其容器的纵横比将其宽度或高度设置为100%。
这是SO,simulate background-size:cover on or 上的另一篇文章,它展示了一些更多的方法来实现这一点。
我发现的另一个选择是使用媒体查询及其max/min-aspect-ratio
https://stackoverflow.com/questions/45051489
复制相似问题