10

次のコードは、Firefox と Chrome では正常に機能しますが、 Safariでは機能しません(Mac と iPad でテスト済み): http://jsfiddle.net/eFd87/。

<div id="wrapper">
    <div id="content">
        <img src="http://farm3.staticflickr.com/2783/4106818782_cc6610db2c.jpg">        
    </div>
</div>

#wrapper {
    position: relative;
    padding-bottom: 33.33%; /* Set ratio here */
    height: 0;
}
#content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: green;
    text-align: center;
}
#content img {
    max-height: 100%;
}​

目標は、ラッパー div の縦横比を固定し (私の Web アプリケーションではカルーセルです)、その中の画像を div (および中央) に収まるようにサイズ変更することです。

height: 0Safari では、 (img の高さが 0 になる)ため、画像は表示されません。画像表示でheight: 100%はありますが、divに収まりません（オーバーフローします）。

この問題の解決策はありますか? 私はこれに何時間も取り組んできました...

4

4 に答える 4

1

Safariでは、幅100％と高さの自動が機能しました。最初は、w と h の両方に 100% を使用していましたが、これは FF では正常に動作しますが、Safari では失敗しました。

.stretch {
  width: 100%;
  height: auto;
}

HTML:

<div>
    <img src="images/someimg.jpg" class="stretch" alt="" />
</div>

そして、ああ、これをすべての要素に追加する Bootstrap を使用しました。

*, *:before, *:after {
  -moz-box-sizing: border-box;
}
于 2013-12-16T11:02:24.937 に答える
1

WWDC20 でWeb 開発者向けの新機能 で発表されたように、Safari 13.1 以降、WebKit はイメージ要素の幅と高さの値からイメージの縦横比を計算するようになりました。これは、直面している問題が最新バージョンのブラウザーで修正されたことを意味します。

次のビデオでは、Chrome と Safari が同じように動作する私のマシンで実行されたテストを見ることができます: https://recordit.co/GULXcMpfPW

以下も参照してください。

于 2020-07-11T07:33:23.117 に答える
0

これはあなたの質問に対する素晴らしい答えではありませんが、それでも答えです。

CSS のみのアプローチを使用してこれを行うことが可能であることは非常に疑わしいです。なぜなら、私が知る限り (これについて訂正できてうれしいです)、別の CSS プロパティの に基づいて計算を実行する方法がないからです。したがってwidth: height * 1.3;、たとえば不可能です。% も使用できません。これは、それ自体ではなく、親のパーセンテージであるためです。

下部パディングを含む現在見ている方法も確実に機能しませんが、あなたの画面では機能しますが、他の誰かの画面の縦横比が異なる場合、またはブラウザウィンドウの縦横比を変更するツールバーがたくさんある場合は、縦横比がおかしくなる。% は、サイズを保証できない限り、実際には使用できない親です。

私が知る限り、これに関する唯一のオプションは JavaScript です。最も明白で私の推奨事項は、幅に基づいて高さを計算して明示的に設定する jQuery またはその他のフレームワークです。ただし、ブラウザ ウィンドウのサイズ変更をリッスンすることを忘れないでください。

于 2012-07-02T08:11:08.650 に答える