2

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

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

4

3 回答 3

2

我绝对不建议使用纯 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

于 2012-11-10T10:43:05.523 回答
0

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

background-image: url(url/to/your/image.png);
background-size: cover;
于 2012-11-10T10:39:21.523 回答
0

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

包含

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

cover

指定背景图片在保证两个尺寸都大于或等于背景定位区域对应尺寸的情况下，尽量缩小。

于 2012-11-10T10:39:30.097 回答