4

私の要件 -

  1. div/canvas 内にランダムな画像が表示される
  2. 画像の高さは親の高さに調整する必要があります
  3. 画像の幅は（高さに応じて）比例してサイズ変更する必要があります
  4. 画像の幅が親の幅より大きい場合、左右から均等に切り取る

私はJavaスクリプトでこれを達成しました。Jsfiddle はhttp://jsfiddle.net/yesprasoon/N3WvF/にあります。出力ウィンドウのサイズを変更して、それがどのように機能しているかを確認できます。

しかし、私は退屈な方法でやっていると感じており、CSS や jQuery には非常に単純なものがあります。純粋なcss（できれば）で私を助けてもらえますか？

ここにもJavaスクリプトを添付しています-

var strDataURI;
//
displayBackground(true);
//
window.onresize = function(event) {
 displayBackground(false);
}
//
function displayBackground(bChangeImage)
{
 //alert("displayBackground");
 var appWidth = window.innerWidth;
 var appHeight = window.innerHeight;
 //
 if (bChangeImage)
 {
   var suffix_array = ["_california","_easter","_eiffel","_hk","_taj"];
   var ran = Math.floor((Math.random()*5)+1);
   ran = ran - 1;
   //ran = 3;
   strDataURI = "http://minds-eye.info/TP_Test/TP"+suffix_array[ran]+".jpg";
 }
 //
 var myCanvas = document.getElementById('canvas');
 var ctx = myCanvas.getContext('2d');
 var img = new Image;
 img.onload = function(){
  ctx.canvas.width  = appWidth;
  ctx.canvas.height = appHeight;
  //
  var hFraction = appHeight / img.naturalHeight;
  var displayWidth = img.naturalWidth*hFraction;
  mrgLeft = (appWidth - displayWidth)/2;
  mrgTop = (appHeight - img.naturalHeight)/2;
  ctx.drawImage(img,mrgLeft,0, displayWidth, appHeight);
  //blurMargin = 20;
  //stackBlurCanvasRGB( "canvas", blurMargin, blurMargin, appWidth-blurMargin*2, appHeight-blurMargin*2, 6 );
  };
 img.src = strDataURI;
 }
4

2 に答える 2

1

これでうまくいくはずです：

フィドル

HTML:

<div id="canvasHolder">
</div>

CSS

#canvasHolder{
    background: white url(http://placekitten.com/400/700) no-repeat center center;
    background-size: auto 100% ;
    height:100%;
    width:100%;
}
于 2013-12-19T10:55:50.183 に答える
1

背景画像の高さを常に含まれる要素の 100% に維持し、幅を比率を維持して自動的にスケーリングするには、背景サイズを「auto 100%」に設定して、幅を auto に設定し、高さを100%に。幅は比例してスケーリングされますが、高さは常に含まれる要素の高さの 100% のままです。

センタリングは、左右の自動クロッピングを提供します。

HTML:

  <div class="container">       
  </div>

CSS:

.container {
  background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQWamCIidr9XrdW7BqKL5DXbqqQxlL8z43Imawqvi5esIqNe7Uh);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  height: 300px;
}

私の jsBiin デモを参照してください。CSS でコンテナーの高さを変更して、画像が比例して自動的にスケーリングされることを確認します。

于 2013-12-19T07:23:22.377 に答える