在HTML5和CSS中调整和裁剪图像

Question

我的要求 -

1. 在div/canvas内随机显示一张图片
2. 图像高度应调整到父元素高度
3. 图像宽度应按比例重新调整（与高度一起）
4. 如果图像宽度大于父元素宽度，则从左右两侧均匀裁剪

我已经用JavaScript实现了这一点。Jsfiddle网址为http://jsfiddle.net/yesprasoon/N3WvF/。您可以调整输出窗口的大小以查看其工作方式。

但是，我觉得我正在以繁琐的方式做，并且CSS和/或jQuery中有一些非常简单的方法。请您帮忙使用纯CSS（最好）吗？

我也在此附上JavaScript代码 -

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;
 }

- Prasoon

Answer 1

这应该可以解决问题：

FIDDLE

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%;
}

- web-tiki

Answer 2

如果想让背景图片的高度始终保持在包含元素的100％，并且宽度自动缩放，保持比例不变，只需将background-size设置为"auto 100％"即可。这样，宽度将自动设置为自适应，而高度将保持为包含元素高度的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;
}

看看我的jsBin演示这里。在CSS中更改容器的高度，可以自动按比例缩放图像。

- guymid

---

你的示例只显示了调整大小。如果你看到我的问题（第4点）和/或玩弄我的示例fiddle - 你会明白我想要实现什么。 - Prasoon

我已经添加了背景居中，它可以进行左右裁剪。我认为这可以实现与你的JSFiddle相同的结果，除非我漏掉了什么。 - guymid