cssメディアクエリを使用したパーセンテージによるシンク画像

Question

こんにちは私は、メディアクエリを使用してCSSを使用して画像をパーセンテージ（たとえば10％）縮小することが可能かどうか疑問に思っています。

これまで私がこれまで持っていたことは次のとおりです。 https://jsfiddle.net/gavinfriel/d98sv4cy/

私はコンテンツのURLを使用していますので、可能であれば背景のプロパティを使用しないようにしてください。

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

Answer 1

以下のCSSのようになります。応答性の高いデザインにはメディアクエリが使用されます。たとえば、200pxの画面幅では、画像は元のサイズの10％、400pxの幅では50％になります。

CSS

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

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