0

この質問は、異なる言葉のタイトルとオプションで何度も尋ねられていることを認識していますが、自分に合ったものをまだ見つけていません.

端からオーバーフローすることなく、img で画面の大部分を (アスペクト比を維持して) 埋めようとしています。（基本的に、画像を表示するときにFirefoxブラウザが達成すること）

私が試したもののほとんどは、一方向にしか機能しません。幅はサイズ変更されますが、高さがオーバーフローしてしまい、CSS または JScript のいずれかを使用する他の方法でも同じです。また、私の問題の要因は、これを縦向きと横向きの両方の画像に適用したいということです（多かれ少なかれ、サイトにあるすべての画像）

これは、純粋な CSS を使用して動作するはずですが、そうではないようです (ただし、すべての CSS に完全に精通しているわけではありません)。

JSFiddle へのリンク

body, html {
    margin:auto;
    padding:6px;
    height:100%;
    width:100%;

}
img {
    max-width:100%;
    max-height:100%;
}

他にもたくさんのスクリプトがありますが、この投稿は少し長くなります。

JQueryまたはCSS（DIV内またはなし）を使用して、画面内に画像を含めるのを手伝ってくれる人はいますか

前もって感謝します、

4

3 に答える 3

1

この jQuery プラグイン: TailorFitを試して、デモ をチェックしてください。

デモでさまざまなオプションを試して、これがうまくいくかどうかを判断できます。jQuery と相対位置のみを使用するため、ブラウザーのサポートは極端です。

完全な開示 - 私はプラグインの作成者です。

于 2013-04-18T16:00:55.183 に答える
0

私の答え：

画像を div でラップし、CSS で div のサイズを設定するだけで終わりました。

PURE CSSのサイズ変更

残念ながら、この方法は古いブラウザでは非常にひどいものに見えるかもしれませんが、少なくとも私はピクルスとスタイリングの小さな部分から解放されました.

うまくいけば、すぐにjQueryの代替品を見つけることができます.

body, html {
    width:98%;
    height:98%;
}
.outer {
  position:fixed !important;
  position:absolute;
  margin:auto;
  text-align:center;
  top:10px;
  right:0;
  bottom:10px;
  left:0;
}
img {
max-width:100%;
max-height:100%;    
padding:4px;
background-color:#fff;
}

----
<div class="outer">
<img src="whatever.jpg" />
</div>
于 2013-04-15T04:29:09.880 に答える
0

今、あなたを定義しますhtml, body height 100%;

このように

body, html {
     height:100%;
}
于 2013-04-11T06:14:32.300 に答える