CSSを使用してdiv(または他の要素)の幅をその幅(またはその逆)に対してサイズ変更することは可能ですか?基本的には、ブラウザウィンドウのサイズが変更されたときに、割合の幅の画像が比例して変更されるように動作させるにはどうすればよいですか?CSSサイズ変更divは比例して画像のサイズ変更に似ています
答えて
thisをご覧ください。要するに:いいえ、それはあなたが.parent
要素に幅または高さを設定したいとあなたが維持する必要があるアスペクト比を知っている場合、あなたはこのような何かを行うことができる唯一のCSS
ありがとう@Wesley、それは意味がありますが、クロスブラウザーのIE式タイプのソリューションは理想的でしたが可能ではありませんでした。私はまだブラウザがイメージ(および埋め込み、オブジェクト、ビデオタグ)のサイズを変更する方法について疑問を抱いています。そのような場合に特別なことは何ですか?また、同じ動作をエミュレートするdivを持つことは可能ですか? – jFrymann
divは本当にarentイメージであり、ブラウザはそれらを別々に扱います。動作をエミュレートすることはできますが、CSSではエミュレートすることはできません。 JavaScriptを使用することはそれほど難しいことではありません。 – Wesley
を使用ことはできません。
.parent{
width: 150px;
}
.child{
width: 100%;
padding-top: 50%; /* outer height will be 75px (150px*0.5) */
}
高さ(または幅)を0にして、パディングのみに基づいて定義していることに注意してください。したがって、コンテンツを追加したい場合は、おそらく、絶対配置されたdiv内に、.child
の範囲で囲む必要があります。例についてはthis fiddleを参照
測定単位としてemsを試すことができます。下のオスカーのソリューションと組み合わせると、親の寸法をピクセルで定義/調整し、比例的な結果を得ることができます。 –