CSSで画像サイズを制御する方法の紹介

1. Web ページ制作スキルの解決策例: CSS を使用して画像の適応サイズを制御する

自動画像適応は、制作中に画像が開かないように画像のサイズが調整される非常に一般的な機能です。コンテナに必要な制御が必要ですが、CSS を使用して画像を制御してサイズを調整できますか?

私たちは比較的単純な解決策を考えましたが、完璧ではありませんが、要件がそれほど高くない場合は、すでにニーズを満たすことができます。以下のコードを見てみましょう:

p img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

◎ max-width:600px; IE7、FF、およびその他の非 IE ブラウザでは、最大幅は 600px です。ただし、IE6では動作しません。

◎ width:600px; 画像サイズはどのブラウザでも600pxです;

◎ 画像サイズが600pxより大きい場合は、自動的に600pxに縮小されます。 IE6で有効です。

◎ overflow:hidden; 画像サイズの制御失敗による伸びや変形を避けるため、余分な部分を非表示にします。

2. 画像が大きすぎる場合があり、Web ページのきちんとしたレイアウトが崩れてしまいます。このとき、CSSを使用して画像の高さまたは幅を比例的に圧縮することができます。 CSSコードは次のとおりです:

img,a img{ 
border:0; 
margin:0; 
padding:0; 
max-width:590px; 
width:expression(this.width>590?"590px":this.width); 
max-height:590px; 
height:expression(this.height>590?"590px":this.height); 
}

このように、画像の高さまたは幅が590pxを超える場合、元のサイズを超えない場合は590pxに圧縮されて表示されます。

以上がCSSで画像サイズを制御する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。