Question

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

使用较短的图像尺寸填充图像允许的空间。（如果图像是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");
            }
        }); 
    }

Answer 1

我有类似的问题，但解决方案是裁剪左右边距，而图像应居中。我的解决方案是在这个JS小提琴：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;
}

Answer 2

在图片的CSS中设置max-width: 250px; max-height: 250px;。浏览器为您带来了魔力。

Answer 3

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

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

由于调整大小是在浏览器引擎中实现的，因此它可能比你的原生javascript实现快得多，特别是如果它涉及到一页上的大量图像。

创建不同大小的图像的缩略图

3 个答案: