javascript - 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。

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：

你的分区： height:200px; width:200px; overflow: hidden;

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

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