Question

假设我们有一个用户上传的图片，上传脚本限制了mb而不是图片大小（因此可能是任何比例，600X200,200X350等等。）

我已经在我的网站上使用写在css上的twitter引导程序image handler在一个部分中显示此图像，这对于个人资料图片很有用，问题是现在我希望该图像成为封面（如facebook） / twitter cover image），我的网站具有响应性，因此如果屏幕分辨率小于900px宽，则封面的宽度为900px或100％。高度始终固定为200px。所以我知道有一种方法可以使用CSS控制正确的图像显示（也许还有jquery）但我不是前端开发者，我是一个php开发人员，我不想使用服务器端脚本来做这件事。所以我正在寻找建议或代码片段（css，javascript）开始，我相信它必须是一个已经制作的解决方案，但我没有在谷歌上找到任何。谢谢你的建议！

Answer 1

我肯定不建议使用仅限css的解决方案。如果上传的图片可以有任何分辨率，甚至不是客户端解决方案。您希望使用php脚本来保存已上载图像的已调整大小的版本并将其提供给客户端。无论是作为块的背景图像还是使用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();
});

这是一个工作小提琴：http://jsfiddle.net/kHxd2/2/

当在IE中呈现缓存图像时，图像的onload侦听器可能需要tweeking来做出反应：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;
}

请参阅更新的小提琴：http://jsfiddle.net/kHxd2/3/

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

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

Answer 2

您必须将此图像作为背景图像，然后使用样式：

background-image: url(url/to/your/image.png);
background-size: cover;

Answer 3

css3中有一个名为background-size:cover;和background-size:contain;的属性。您可能希望使用它们来满足您的需求。

<强>包含

指定背景图像应缩放到尽可能大，同时确保其尺寸小于或等于背景定位区域的相应尺寸。

的盖

指定应将背景图像缩放到尽可能小，同时确保其尺寸大于或等于背景定位区域的相应尺寸。

以一种固定尺寸显示图像的强大方式

3 个答案: