javascript - 显示具有一个固定尺寸的图像的稳健方式

Question

假设我们有一张用户上传的图片，上传脚本限制了 mb 但不限制图片大小(所以可以是任何比例，600X200、200X350 等等...)。

我已经使用 twitter bootstrap 在我的网站上的一部分中显示了这张图片 image handler写在 css 上，这对个人资料图片很有用，问题是现在我希望该图像成为封面(如 facebook/twitter cover image)，我的网站是响应式的，所以封面的宽度是 900px 或 100% 如果屏幕分辨率小于 900px 宽。高度始终固定为 200px。所以我知道有一种方法可以使用 CSS(也可能使用 jquery)来控制正确的图像显示，但我不是前端开发人员，我是 php 开发人员，我不想使用服务器端脚本来执行此操作。所以我正在寻找建议或代码片段(css，javascript)作为开始，我相信它必须是一个已经制定的解决方案，但我没有在谷歌上找到任何东西。感谢您的任何建议!

Answer 1

我肯定不建议使用纯 css 解决方案。如果上传的图片可以有任何分辨率，甚至不是客户端解决方案。您想要使用 php 脚本来保存已调整大小的上传图像版本并将其提供给客户端。作为 block 的背景图像并使用 css(不是跨浏览器)或作为 img 标签并使用 js 调整大小。

CSS:

.myselector{
    background-size: cover;
} 

或 js (jquery):

$(function(){
    var containers = $('.myselector'), w = $(window);
    function onResize(){
        //resize code
        containers.each(function(){
            var $this = $(this),
                w = $this.width(),
                h = $this.height(),
                ratio = w/h,
                $img = $('img',$this); // assuming there is only one img in each container
            $img.css({'width':'auto','height':'auto'});
            var iw = $img.width(), ih = $img.height(), iratio = iw/ih;
            if(iratio>ratio){
                $img.css({
                    height:'100%',
                    width:'auto',
                    marginLeft: (w-iw*(h/ih))/2
                });
            }
            else{
                $img.css({
                    width:'100%',
                    height:'auto',,
                    marginTop: (h-ih*(w/iw))/2
                });
            }
        });
    }
    w.bind('resize',onResize);
    //resize on each image load event
    $('img',containers).bind('load',onResize);
    onResize();
});

这是一个有效的 fiddle :http://jsfiddle.net/kHxd2/2/

当缓存图像在 IE 中呈现时，图像的 onload 监听器可能需要 tweeking 才能使用react:http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/

您可能还想为罕见的非 js 浏览器设置 css 规则... (.myselector img{width:100%;})

编辑:容器 CSS:

.myselector{
    width: 100%;
    max-width: 900px;
    height: 200px;
    margin: auto; /* centering */
    overflow: hidden;
}

查看更新的 fiddle :http://jsfiddle.net/kHxd2/3/

最好的解决方案是将图像容器嵌入到主包装器 div 中，并将上述 css 规则应用于该大容器。

这里有一些有用的代码来处理服务器端的大小调整:http://www.9lessons.info/2009/03/upload-and-resize-image-with-php.html