媒体查询不会影响对象

【问题标题】：Media query will not affect object媒体查询不会影响对象
【发布时间】：2014-05-29 05:48:19
【问题描述】：

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

【问题讨论】：

标签： object svg responsive-design

【解决方案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 的优缺点可以在这篇很棒的文章中找到：How to Add Scalable Vector Graphics to Your Web Page by Craig Buckler

编码愉快 :)

【讨论】：