创建不同尺寸图像的缩略图答案

【问题标题】：Creating Thumbnails of different sized images创建不同尺寸图像的缩略图
【发布时间】：2012-04-20 10:38:57
【问题描述】：

我正在尝试制作用户提交的图片的缩略图，这些图片的大小可能都不同，但是当我尝试做的是：

使用图像的较短尺寸来填充图像允许的空间。（如果图像为 500x350 且缩略图大小为 250x250，则图像高度将填充缩略图）然后我试图将图像居中在另一个维度上。我在做这件事时遇到了麻烦，我不知道我应该使用 CSS 还是 Javascript。任何建议都会很棒。

解决方案：我让它按照我想要的方式工作。

    function sizeThumbs(){
        //resize each idea image so it is a good sized/centered thumbnail
        $.each($("img.thumbpic"), function() {
            var maxWidth = 250;
            var maxHeight = 150;
            var width = $(this).width();
            var height = $(this).height();

            if((width/maxWidth) < (height/maxHeight)){
                var multiplier = maxWidth/width;
                var newHeight = height * multiplier;

                $(this).css("width", maxWidth);
                $(this).css("height", newHeight);

                var heightD = (maxHeight - newHeight)/2;
                $(this).css("margin-top", heightD+"px");
                $(this).css("margin-bottom", heightD+"px");
            }else{
                var multiplier = maxHeight/height;
                var newWidth = width * multiplier;

                $(this).css("width", newWidth);
                $(this).css("height", maxHeight);

                var widthD = (maxWidth - width)/2;
                $(this).css("margin-left", widthD+"px");
                $(this).css("margin-right", widthD+"px");
            }
        }); 
    }

【问题讨论】：

标签： javascript html css image thumbnails

【解决方案1】：

我有类似的问题，但解决方案是要裁剪左右边距，而图像应该居中。我的解决方案在这个 JS Fiddle 中：http://jsfiddle.net/david_binda/9tTRQ/1/

这很简单，你需要两个图像包装器和简单的 CSS。

HTML

<div class="thumb-wrapper">
   <a href="" title="" class="img">
      <img src="http://upload.wikimedia.org/wikipedia/commons/4/40/Tectonic_plate_boundaries.png" alt="" />    
</a>
</div>

CSS

.thumb-wrapper{
    width: 250px; // desired thumbnail width
    height: 250px; // desired thumbnail height        
    overflow: hidden;    
    position: relative;
    margin: 0 auto;
}
.thumb-wrapper .img{
    display: block;    
    position: absolute;
    width: 350px; // should be wider than final thumbnail
    height: 250px; // desired thumbnail height
    left: 50%;
    margin-left: -175px; // half of above defined width eg. 350/2 = 175
}
.thumb-wrapper .img img{
    width: auto !important;
    max-width: 350px !important; // should be wider than final thumbnail
    min-width: 250px !important; // desired width of thumbnail
    height: 250px !important; // desired thumbnail height
    margin: 0 auto;
    display: block;
}

【讨论】：

【解决方案2】：

在图片的 CSS 中设置 max-width: 250px; max-height: 250px;。浏览器为您施展魔法。

【讨论】：

使用较长的尺寸作为限制，在 500x350 的图像上它将变为 250x175。但我希望它变成 250x250，其中图像按比例缩小，因此宽度为 250，图像的顶部和底部被截断，以保持比例。
好的，很简单。在 250x250 <div> 上将其设置为 background-image，然后添加 background-size: cover;。不过，并非所有浏览器都支持...只是较新的浏览器。

【解决方案3】：

您还可以使用 html5 画布元素和 translate 方法

http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/

由于调整大小是在浏览器引擎中实现的，因此它可能比您的原生 javascript 实现要快得多，尤其是当它涉及到一页上的大量图像时。

【讨论】：

它会处理尺寸