CSS更好地显示图像预览

Question

我试图弄清楚什么是最好的，如果可以的话，以及想要的方法来拍摄上传的图像并修剪CSS中的图像。如果无法在纯CSS中完成，那么在JavaScript / jQuery中执行此操作的方法是什么？图像可能是不同的大小，但我正在寻找一种方式，图像正方形，然后减少到适合。示例如下：

此图片为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。

Answer 2

您可以在CSS中执行此操作，但它仅适用于现代浏览器：

您将使用background-image属性：

<div id="myImageTrimed">
</div>

和css：

#myImageTrimed {
    background-image: url('img/youImage.jpg');
    background-position: center; /* to make sure it trims the borders */
    background-size: cover; /* As large as possible */
    height: 200px; /* But only 200x200px are shown */
    width: 200px;
} 

如果您有更多浏览器限制，请发表评论。

Answer 3

只需将CSS width设置为您需要的值，系统会自动调整高度以保持宽高比。

#img_preview{
    width:200px;
}

Answer 4

您可以使用div：

屏蔽图像

你的div： height:200px; width:200px; overflow: hidden;

你的形象：      position:absolute; height:inherit; margin-left:-15%;

请参阅下面的演示：http://jsfiddle.net/jRCgP/