javascript - CSS 以更好地显示图像预览

Question

我试图弄清楚什么是最好的，如果可以的话，以及拍摄上传的图像并在 CSS 中 trim 图像的理想方法。如果不能用纯 CSS 完成，用 JavaScript/jQuery 做的方法是什么？这些图像可能大小不同，但我正在寻找一种方法，使图像在中心成正方形，然后缩小以适合。示例如下:

这张图片是 413 x 300。

如果此图片从左侧和右侧 trim 为投资组合拇指，它将是 300 X 300:

然后需要将图像缩小到 thumb 200 x 200 或 thumb 设置为显示的任何值:

编辑我的理解是，如果应用 #img_preview{width:200px;} 会导致:

Answer 1

这里的例子: http://jsfiddle.net/cnWqQ/5/

这样的CSS:

#img-wrap{
    height:200px;
    width: 200px;
    background-image: url('http://i.stack.imgur.com/yQ1j8.jpg');
    background-size: cover;
    background-position:center; 
}

像这样的html:

<div id="img-wrap"></div>

通过将图像作为背景放在 div 中工作，一致地适用于所有图像形状和大小。

它涉及到一些css3。