スマホで画像を半分の大きさで表示する

スマホサイトを制作する場合やRetinaディスプレイ用に制作するとき、表示するサイズの倍の大きさで画像をスライスして、
半分のサイズに縮小して表示させます。

cssでは、zoomを使用して

/* --- Retinaディスプレイ*/
img {
  zoom: 0.5;
}

/* --- Retinaディスプレイ*/

img {

zoom: 0.5;

}

このように指定して画像を半分のサイズに指定することができます。

これで、指定可能ですが、
zoom処理で不具合などが起こる可能性もあります。

IE8では、zoomの値を1に戻してCSSで画像の大きさを指定するとよいでしょう。

img { height: auto; zoom: 1; }

1	img { height: auto; zoom: 1; }

wordpressでRSSフィードを取得して表示する方法

疑似要素のcontentプロパティで文字化けを回避する方法