0

1280(w) x 1024(h) のインライン img があり、div に含まれています。div のサイズはビューポートの 100% (w/h) に設定され、オーバーフローは非表示になっています。

画像をフルスクリーンの背景として使用したいのですが、サイズに関係なくビューポートを完全に塗りつぶし、境界線が表示されないようにする必要があります。アスペクト比を維持する必要があり、常に画像を中央に配置したいと考えています。これを達成するために、画像の一部がトリミングされることを認識しています。

画像の高さをビューポートの高さと一致させ、画像のアスペクト比に基づいて幅を計算するとうまくいくと思いますが、これを行う方法がわかりません。誰でも助けることができますか？

よろしくお願いします。

4

3 に答える 3

0

あなたの質問に対する実際の回答ではありませんが、潜在的な代替案です - min-height/ min-widthCSS プロパティを試しましたか?

HTML:

   <div class="container">
       <div class="image-wrapper">
           <img src="..." />
       </div>
   </div>

CSS:

.container { 
    width: 100vw;
    height: 100vh;
    background-color: grey;
}

.image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.image-wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(-50%) translateY(-50%);
}

フィドル: https://jsfiddle.net/mkjoyep1/

例では、.container(your full width/height div) はページ幅vw/whを埋め、親の幅と高さに一致するセットを.image-wrapper持っています。トリミング メカニズムとして機能することで、イメージを引き伸ばしてコンテナーを埋めることができます。ここで検討した方法で画像を中央に配置しました。width/height100%overflow: hidden

これは、Chrome と Firefox で動作するようです。

*html/cssを含めるように編集

于 2015-08-06T02:27:19.723 に答える
0

バックストレッチを使用http://srobbin.com/jquery-plugins/backstretch/

$("#demo").backstretch("http://urltoimage.jpg");'

#demo を 100/100% の幅と高さに設定します

于 2013-08-23T11:34:11.237 に答える
0

img タグの使用に 100% 固執していない場合は、次のことができます。

HTML

<div id="background"></div>

CSS

#background {
  background: url('path/to/img.jpg');
  background-size: cover;
  background-position: center center;
  width: 100vw;
  height: 100vh;
}
于 2015-08-06T02:30:22.357 に答える