CSSサイズ変更divは比例して画像のサイズ変更に似ています

CSSを使用してdiv（または他の要素）の幅をその幅（またはその逆）に対してサイズ変更することは可能ですか？基本的には、ブラウザウィンドウのサイズが変更されたときに、割合の幅の画像が比例して変更されるように動作させるにはどうすればよいですか？CSSサイズ変更divは比例して画像のサイズ変更に似ています

出典

2012-01-19 jFrymann

測定単位としてemsを試すことができます。下のオスカーのソリューションと組み合わせると、親の寸法をピクセルで定義/調整し、比例的な結果を得ることができます。 –

thisをご覧ください。要するに：いいえ、それはあなたが.parent要素に幅または高さを設定したいとあなたが維持する必要があるアスペクト比を知っている場合、あなたはこのような何かを行うことができる唯一のCSS

出典

2012-01-19 08:42:14 Wesley

ありがとう@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を参照

出典

2014-03-14 18:21:36 Oscar

CSSサイズ変更divは比例して画像のサイズ変更に似ています

答えて

関連する問題