媒体查询不会影响对象

Question

我无法获得媒体查询来影响以下内容。 我需要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>

Answer 1

我遇到了同样的问题，我注意到在将object标记添加到页面后，第一次加载时页面解析出现了问题，我仍然没有找到解释，但是在此期间您可以使用以下标记代替object 。

使用<embed>标签

 <embed type="image/svg+xml" src="image.svg"/>  

在<iframe>

 <iframe src="image.svg"/> 

使用<img>标签

<img src="image.svg"/> 

使用CSS背景图片

#myelement
{
    background-image: url(image.svg);
}

在这篇很棒的文章中可以找到在以前的标记中加载SVG优缺点： 如何将可伸缩矢量图形添加到您的网页上作者：Craig Buckler

快乐的编码：）