html - 画像表示のサイズを変更する

Question

サムネイルとして表示しませんが、CSSはサイズ1000x1000の画像をサイズ500x500の画像に圧縮するのに役立ちますか？

画像のCSSは次のようになります。

.images {
  background:url("image.png") no-repeat scroll; // this is a 1000x1000 sized image
}

これを上書きするにはどうすればよいですか？サイズ500x500の別の画像を生成する必要はありません。

score 2 · Accepted Answer

CSS3を使用できますbackground-size：

.images{
    background:url("image.png") no-repeat scroll;
    background-size:500px 500px;
}

ただし、ダウンロード後に画像のサイズが変更されます。そして、最良の方法は、ユーザーが画像をダウンロードする前に、PHP（または同様のもの）を使用して画像のサイズを変更することです。

サーバー側でサイズを変更できず、クロスブラウザーにしたい場合は、次を使用することもできます。

HTML：

<div class="images">
    <img class="bg" src="image.png" alt="My image" />
    Content
</div>

CSS：

.images{
   position:relative;
}
.images>.bg{
   height:500px;
   width:500px;
   position:absolute;
   top:0;
   left:0;
   z-index:-1;
}

（両方heightを設定できwidthますが、必要なのは1つだけです）。

score 2 · Accepted Answer

background-size: 500px 500px;

ただし、ie7およびie8ではサポートされていません。

画像タグで表示する場合は、画像タグの幅と高さを設定できます。画像を絶対位置に配置することで、背景を偽造することができます。

<img width="500" src="..." />

すでに別の場所で画像を使用している場合は、画像を再利用してサイズを変更することをお勧めします。

2 に答える 2