css - cssで流体の高さを取得するには?

Question

いくつかのアイテムでスライドダウン効果を作ろうとしています。ホバーすると、画像がスライドダウンしてコンテンツが表示されます。問題は、ブラウザのサイズを変更すると、画像のサイズも変更されることです。

img { max-width: 100%; }

しかし、問題は、私も流体の高さを持つことができないことです.それらにパーセンテージの高さを使用することはできません. これが起こっていることです：

何が起こっているかを確認するために背景を黒に設定しました。現在、高さは 210px です。

では、どうすればこの問題を解決できますか?

score 1 · Accepted Answer

私は自分の仕事でこの同様の問題に遭遇しました。残念ながら、CSS だけでは明確な解決策はありません。イベント中に起動する JavaScript を使用するか、onresize目に見えないプレースホルダー画像を追加して、divのサイズ変更を正しい比率に保つことができます。

私がしたことは.desc、div. 透明を使用する.pngか、私のコードペンで好きなように画像を設定できますopacity:0.0;。<li>スクロール可能な真ん中を含む私の例を見てください。

注:filterクロスブラウザーで動作させるには、より多くのテストを行い、画像を透明にするために IE を使用する必要があります。

score 0 · Accepted Answer

img {}に追加min-width:300px;します（300pxは任意のサイズに切り替えることができます）。だからあなたは持っているでしょうimg { max-width: 100%; min-width:300px;}。これにより、画像の下でテキストが不足するのを防ぐことができます。

2 に答える 2