CSS 以更好地显示图像预览

Question

我试图弄清楚什么是最好的，如果可以完成，以及需要的方法来拍摄上传的图像并在 CSS 中为拇指修剪图像。如果不能在纯 CSS 中完成，在 JavaScript/jQuery 中完成的方法是什么？图像的大小可能不同，但我正在寻找一种方法，使图像在 center 上呈方形，然后缩小以适合。下面的例子：

此图像为 413 x 300。

如果此图像从左侧和右侧修剪为投资组合缩略图，它将是 300 X 300：

然后需要为拇指缩小图像 200 x 200 或拇指设置为显示的任何值：

编辑 我的理解，如果#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。