0

これがCSSだけで解決できることを願っています。次のような要素があります。

HTML

<a href="" title="">
    <img src="" alt=""/>
</a>

要素の高さは<a>、本体の高さに対するパーセンテージを使用して設定されます。<a>内部の画像は常に要素の高さの 100% でな​​ければなりません。これは、次のような CSS でうまく機能します。

CSS

a {
    display: inline-block;
    height: 20%;
    margin: 0 5% 0 0;
    text-align: center;
}

a > img {
    height: 100%;
}

私が今直面している問題は次のとおりです。ウィンドウのサイズを変更すると、<a>要素が正しい新しい高さを取得するため、画像が正しくスケーリングされます。残念ながら、要素は最初の width を保持し<a>ます。これは、余白が役に立たなくなり、要素が重なり合ったりバラバラになったりすることを意味します。

の効果

この画像で効果を確認できます。

ここに画像の説明を入力

デモ

自分で試すことができます

質問

親要素が常にコンテンツの幅を持つようにこれを解決する方法はありますか? サイズ変更後に新しい高さでページをリロードすると、明らかにすべてが再び収まります。

4

3 に答える 3

0

私はこのように一瞬それを解決しました：

CSS

a {
    margin: 0 1% 0 0;
    background: red;
    text-align: center;
}

a > img {
    position: relative;
    height: 20%;
}

デモ

自分で試してみてください

于 2013-10-29T18:38:54.133 に答える