私たち (特に私のような初心者) は、画像の適応という問題によく遭遇します。この問題は非常に一般的です。記事エリアやフォーラムでは、写真をアップロードする必要がある場所には必ずこの問題が存在し、フォーラムでは時々この問題について質問されることがあります。なぜ？理由は簡単です。Web 編集者やフォーラムのメンバーに、画像のトリミングや最も基本的な HTML コードの理解を要求することはできません。ただし、これには技術的な内容はあまり含まれていません。
以前のソリューションは主に js を使用して実装されましたが、これを使用したことのある人なら誰でも、この方法が少し面倒であることを知っています。もう 1 つの方法は、外部コンテナで over-flow:hidden を定義することです。ただし、この方法は画像を切り取るだけで、自動的には適用されません。
次のメソッドの出現は、優れた CSS2.0 とさらに優れた Microsoft のおかげです (CSS2.0 がなければ、このような冗長なコードは必要ありません ^_^)。私は winXP で ie6.0、ff1.5、opera7.0 でのみテストに合格しました。この記事が他の人にインスピレーションを与え、より多くの専門家が指導できることを願っています。キーは max-width:780px とその下の行です。
固定ピクセル適応:
コードボックスを実行
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; /> <title>css2.0 VS ie</title> <style type=text/css> <!-- body { font-size: 12px; margin: 0px; } # pic{ マージン: 0 自動; 幅: 800 ピクセル; ボーダー: 1 ピクセル #333; width:expression(document.body.clientWidth > 780? 780px: auto ); border:1px 破線 #000; } --> </style> </head> <body> <div id=pic> <img src=http ://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=ホットリンクされた画像を提供してくれた blueidea に感謝します! /> </div> </body> </html>
[Ctrl+A すべて選択 ヒント: 最初にコードの一部を変更してから実行を押すことができます]
パーセンテージ適応:
コードボックスを実行
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; /> <title>css2.0 VS ie</title> <style type=text/css> <!-- body { font-size: 12px; margin: 0; } # pic{ マージン: 0 自動; 幅: 90%; ボーダー: 1px ソリッド #333; width:expression(document.body.clientWidth>document.getElementById(pic).scrollWidth*8/10? 80%: auto ); border:1px 破線 #000; } --> </style> </head> <body > <div id=pic> <img src=http://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=ホットリンクされた画像を提供してくれた blueidea に感謝します。 /> </div> </body> </html>
[Ctrl+A すべて選択 ヒント: 最初にコードの一部を変更してから実行を押すことができます]
思い出させる：
1 この方法は img だけではありません。
2 最大幅、最大高さ、最小幅、最小高さ。
CSS での式の使用の概要作者: ドズブ
意味
IE5 以降のバージョンでは、CSS プロパティを JavaScript 式に関連付けるための CSS での式の使用がサポートされています。ここでの CSS プロパティは、要素の固有プロパティまたはカスタム プロパティにすることができます。つまり、CSS 属性の後に Javascript 式を続けることができ、CSS 属性の値は Javascript 式の計算の結果と等しくなります。 式の中で要素自体のプロパティとメソッドを直接参照することも、他のブラウザ オブジェクトを使用することもできます。この式は、この要素のメンバー関数内にあるかのようになります。
要素の固有プロパティに値を割り当てる
たとえば、ブラウザのサイズに基づいて要素を配置できます。
#myDiv {
位置: 絶対;
幅: 100ピクセル;
高さ: 100ピクセル;
左: 式(document.body.offsetWidth - 110 + px);
上: 式(document.body.offsetHeight - 110 + ピクセル);
背景: 赤;
}
要素のカスタム属性に値を割り当てる
たとえば、ページ上のリンクの点線ボックスを削除します。
通常のアプローチは次のとおりです。
<a href=link1.htm onfocus=this.blur()>link1</a>
<a href=link2.htm onfocus=this.blur()>link2</a>
<a href=link3.htm onfocus=this.blur()>link3</a>
一見すると、エクスプレッションを使用する利点は明らかではないかもしれませんが、ページに数十、さらには数百のリンクがある場合、現時点では Ctrl+C と Ctrl+V を機械的に使用しますか? ましてや両方を比較する必要はありませんか? 、どちらがより冗長なコードを生成しますか?
式の使い方は以下の通りです。
<スタイルタイプ=テキスト/css>
{スター : 式(onfocus=this.blur)}
</スタイル>
<a href=link1.htm>リンク1</a>
<a href=link2.htm>リンク2</a>
<a href=link3.htm>リンク3</a>
例証します:
中のスターは自分で定義した属性であり、expression() に含まれるステートメントは本質的にカスタム属性と式の間に引用符があることを忘れないでください。これはまだ CSS であるため、スクリプトではなく style タグに配置されます。ページ内のリンクの点線ボックスを一文で削除するのは簡単です。ただし、トリガーされた特殊効果が CSS 属性の変更である場合、結果は当初の意図とは異なります。たとえば、マウスの出入りに応じてページ上のテキストボックスの色を変更したい場合は、次のように記述する必要があると自然に考えるかもしれません。
/* 元のテキストが文字化けしています。修正する時間がありません。ごめんなさい!*/
ただし、結果はスクリプト エラーになります。以下に示すように、CSS スタイルの定義を関数に記述するのが正しい方法です。
<スタイルタイプ=テキスト/css>
input {スター:式(onmouseover=function()
{this.style.backgroundColor=#FF0000}、
onmouseout=function(){this.style.backgroundColor=#FFFFFF}) }
</スタイル>
<入力タイプ=テキスト>
<入力タイプ=テキスト>
<入力タイプ=テキスト>
知らせ：
式は比較的多くのブラウザ リソースを必要とするため、一般的にはあまり必要ありません。