0

次の要素マークアップがあります。

<div class="container">
    <a href="#">
        <img src="http://placehold.it/250x500" alt="img" />
    </a>
</div>​

このCSSで：

.container { max-width: 150px; max-height: 150px; }
.container a { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }

このフィドルを参照してください（問題をよりよく示すために、そこに色と不透明度を追加しました）

問題は、アンカーが親の幅 (最大幅: 100%;) に適合している間、親の高さに適合せず、代わりに子 img の高さに適合することです。最大高さ: 100%。コンテナーのmax-heightを高さに変更すると機能しますが、 max-heightにする必要があります。

PS:コンテナーのオーバーフロー (オーバーフロー: 非表示) を非表示にしたくないので、アンカーをコンテナーの高さにしたい!

PPS:問題はアンカーにはありません。コンテナーまたは img の父 (私の場合はアンカー) に固定の高さを与えない限り、img の親としてコンテナーに入れられたすべてのアイテムは img の高さに収まります。しかし、私はそれをしたくありません。流動的である必要があるからです。

PPPS:私は質問に部分的に答えました:この例のように、アンカーの最大高さを継承するように設定できますが、コンテナの最大高さのパーセンテージでは機能しません。残念ながら、これは私が必要とするものです.

4

3 に答える 3

0

さて、これが答えです（私の同僚がこれを手伝ってくれました）：

.containerの幅は固定である必要があります。または、高さが % の場合は、高さが固定のスーパーコンテナ内にある必要があり、アンカーの高さを 100% に正常に設定できます。

それでおしまい！貢献してくれたみんなに感謝します。これが結果の jsFiddleです。

HTMLは次のとおりです。

<div class="superContainer">
    <div class="container">
        <a href="#">
            <img src="http://placehold.it/250x500" alt="img" />
        </a>
    </div>
</div>

</p>

CSSは次のとおりです。

.superContainer { height: 200px; }
.container { width: 30%; height: 50%; background: red; font-size: 0; }
.container a { display: block; width: 100%; height: 100%; background: orange; opacity: 0.7; }
.container a img { opacity: 0.7; }​

答えがあなたのニーズに合わない場合は申し訳ありませんが、非常に特殊なケースが必要でした. 最終的には、この方法を使用して自分の jQuery プラグインをアップロードするつもりです!

于 2012-12-04T14:19:46.847 に答える
0

コンテナ内に余分な可視画像を隠そうとしていると思います...だから、

オーバーフローを試してください：コンテナdivに隠されています。

http://jsfiddle.net/E6aqZ/2/

.container { max-width: 150px; max-height: 150px; background: red; overflow: hidden }
于 2012-12-04T12:25:53.180 に答える
0

アンカーでは、max-height と height プロパティの両方を指定しました。どちらか一方だけが必要です。

于 2012-12-04T11:38:05.487 に答える