14

HTMLの画像について話しましょう。他の制約なしで画像をページにドロップすると、その「自然なサイズ」、つまり画像の文字通りのサイズ (ピクセル単位) が想定されます。CSS を指定するmax-widthと、自然な縦横比max-heightが維持されますが、サイズの制約に合わせて縮小されます。素晴らしい！

任意の要素でその正確な動作が必要です。つまり、自然なサイズ (ピクセル単位で指定) を持ち、 および の影響を受けたときに縦横比を維持する または を作成したいと考えてい<div>ます。（ボーナスポイント：テクニックもサポートされていればかっこいいと思います。）max-widthmax-heightmin-widthmin-height

ここに私が集めたいくつかの情報があります：

  • HTML5 画像の場合、属性が true の場合、属性naturalWidthとnaturalHeight属性を使用して画像の自然なサイズを読み取ることができます。complete残念ながら、MDN が指摘しているように、これらのプロパティは読み取り専用であり、画像要素に固有のものです。

  • このアプローチは素晴らしいですが、(高さは に応答しますがmax-width) 幅は に応答しませんmax-height。

  • 少し検索しても、CSS のみのソリューションが見つかりませんでした。そのため、存在しない可能性があると思います。JavaScript ソリューションも受け入れますが、ウィンドウ サイズと親要素のサイズの変更に対して堅牢である必要があります。

4

3 に答える 3

3

これが私の超大型ソリューションです：

HTML

<div class="ratioBox">
    <div class="dummy"></div>

     <div class="el">This is the super duper ratio element </div>

</div>

CSS

.ratioBox{
    position: relative;
    overflow: hidden;      /* to hide any content on the .el that might not fit in it */
    width: 75%;            /* percentage width */
    max-width: 225px;
    min-width: 100px;
    max-height: 112.5px;
    min-height: 50px;  
}

.dummy {
    padding-top: 50%;      /* percentage height */
}

.el {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver;
}

​

ここで動作することを確認してください： http://jsfiddle.net/joplomacedo/7rAcH/

残念ながら時間がないので、何が起こっているのか理解できない場合に備えて、説明は一日の終わりに行います。[これを書いているのは 7 月 28 日午後 2 時 54 分 (GMT 時間) です]

于 2012-07-28T13:44:57.887 に答える
0

純粋な CSS では、今はそれができないと思います。将来、CSS 変数と計算を完全にサポートするようになるかもしれません。透明な画像を使用して縦横比を指定したり、スクリプトを使用したりできるようになりました。また、LESSのようなものも役立つかもしれません。

于 2012-07-28T06:42:22.873 に答える