css - 画面解像度に対する画像の幅

Question

私はちょうどこのウェブサイトを見てきました：

http://www.morphix.si/#home

そして、どうすれば画像の幅を画面の解像度に合わせてサイズ変更できるのだろうと思っていましたか? (つまり、どのように CSS を配置して、すべての画面で同じように見えるようにするのでしょうか?)

Answer 1

あなたが話しているのであればbackground-image、ここでは CSS3 ソリューションです

background: url(images/image.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

また、すべての画面に対応するレイアウトの設計に関心がある場合は、画面解像度に固有の @media クエリを使用できます。これは、多くの場合、次のようなレスポンシブ デザインに使用されます。

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles goes here */
}