3

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

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

3 回答 3

2

我有类似的问题，但解决方案是要裁剪左右边距，而图像应该居中。我的解决方案是在这个 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;
}​
于 2012-06-24T14:27:18.910 回答
0

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

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

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

于 2012-04-07T12:23:08.617 回答
0

max-width: 250px; max-height: 250px;在图像的 CSS 中设置。浏览器为您创造了奇迹。

于 2012-04-06T22:09:32.057 回答