[英]Media query will not affect object
I cant get a media query to affect the following. 我无法获得媒体查询来影响以下内容。 I need the svg object to change to height:100% @media(max-width:767px)
我需要svg对象更改为height:100%@media(max-width:767px)
<object type="image/svg+xml" data="img/5/image.svg"></object>
<style type="text/css">
body {
overflow: hidden;
}
object {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: auto;
}
</style>
I had the same problem, I have noticed that after I added object
tag to my page, something wrong happens with page resolution on the first load, I still didn't find an explanation for that, but for the mean time you may use one of the following tags instead of object
. 我遇到了同样的问题,我注意到在将
object
标记添加到页面后,第一次加载时页面解析出现了问题,我仍然没有找到解释,但是在此期间您可以使用以下标记代替object
。
Using an <embed>
Tag 使用
<embed>
标签
<embed type="image/svg+xml" src="image.svg"/>
Within an <iframe>
在
<iframe>
<iframe src="image.svg"/>
Using an <img>
Tag 使用
<img>
标签
<img src="image.svg"/>
Using a CSS Background Image 使用CSS背景图片
#myelement
{
background-image: url(image.svg);
}
Advantages and disadvantages of loading SVG
in the previous tags can be found in this great article: How to Add Scalable Vector Graphics to Your Web Page by Craig Buckler 在这篇很棒的文章中可以找到在以前的标记中加载
SVG
优缺点: 如何将可伸缩矢量图形添加到您的网页上作者:Craig Buckler
happy codding :) 快乐的编码:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.