Media query will not affect object

Question

I cant get a media query to affect the following. I need the svg object to change to 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

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 .

Using an <embed> Tag

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

Within an <iframe>

 <iframe src="image.svg"/> 

Using an <img> Tag

<img src="image.svg"/> 

Using a CSS Background Image

#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

happy codding :)