Shink Bild nach Prozentsatz mit css Medien Abfrage

Question

Hallo Ich frage mich, ob es möglich ist, ein Bild um einen Prozentsatz (sagen wir 10%) über CSS mit einer Medienabfrage zu verkleinern.

Hier ist, was ich bisher habe. https://jsfiddle.net/gavinfriel/d98sv4cy/

Ich verwende eine Inhalts-URL wie so, um das Bild zu erhalten, also wenn möglich, die Verwendung der Hintergrund-Eigenschaft zu vermeiden, würde es geschätzt werden.

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

Answer 1

Es würde so etwas wie die unten CSS aussehen. Medienabfragen werden für Responsive Designs verwendet. Bei einer Bildschirmbreite von beispielsweise 200 Pixeln würde das Bild 10% seiner ursprünglichen Größe haben, bei einer Breite von 400 Pixeln wäre es 50%.

CSS

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

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