Shink image by percentage using css media query

Question

Hi I'm wondering if it's possible to shrink an image by a percentage (say 10%) via css using a media query.

Here's what I have so far. https://jsfiddle.net/gavinfriel/d98sv4cy/

I'm using a content url like so to source the image so if possible to avoid using the background property it'd be appreciated.

#logo:before {
    content: url(http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/56f3b98c7da24fd59ecdfa03/1458813324535/irishwater.png);
}

score 0 · Accepted Answer · answered Mar 24 '16 at 15:34

0

It would looks something like the below CSS. Media queries are used for responsive designs. For example, at a screen width of 200px the image would be 10% of it's original size, at 400px width it will be 50%.

CSS

@media screen and (max-width: 200px) {
    #irishwater {
      width: 10%; 
      height:10%;
      }
}

@media screen and (max-width: 400px) {
    #irishwater {
      width: 50%; 
      height:50%;
      }
}

answered Mar 24 '16 at 15:34

Danielson

88
1
8

thanks man. I'm having a separate problem now. Because I'm using `#irishwater:before{` (so that IE/Edge can use the `content` property, The image does not repond to the media queries. It works when I remove the `:before` tag, any advice on another approach? – Gavin Friel Mar 24 '16 at 16:34
1

Be aware of the order - http://stackoverflow.com/questions/8790321/why-does-the-order-of-media-queries-matter-in-css – Stickers Mar 24 '16 at 16:34

Shink image by percentage using css media query

1 Answers1