Question

我有一个背景图片，我正在尝试通过指定所有图像的高度和宽度来优化网站。我无法弄清楚如何将宽度设置为450，将高度设置为350。

<!-- BACKGROUND IMAGE -->
    <script src="js/supersized.3.2.1.min.js"></script>
    <script type="text/javascript">
jQuery(function($){
$.supersized({slides:[{image:"/images/heritage/background.jpg"}]});});
    </script>

Answer 1

要设置所有图像的宽度和高度，可以使用.width() and .height()。在您的情况下，您需要<img>代码的以下代码：

$(img).width(450).height(350)

现在，如果您尝试调整背景图片的大小，则需要设置CSS样式（duplicate post）：

$(selector).css({
    "-o-background-size": 450px 350px,
    "-webkit-background-size": 450px 350px,
    "-khtml-background-size": 450px 350px,
    "-moz-background-size": 450px  350px,
    "background-size": 450px 350px
})

编辑：如果您想优化图片或将宽度和高度属性设置为实际图片，请尝试使用resrc.it，它提供压缩/优化（通过{{1} }参数），调整大小（通过O={}参数），或通过S={}参数裁剪。但是，resrc.it是一个付费API，可以免费试用30天。

如果您正在寻找免费选项，您可能需要在自己的服务器上托管您的选项。一个很好的建议是ImageResizer，它有一个免费版本，只有你需要的功能。

您也可以从Google AppEngine托管您的网站或托管您自己的CDN，以利用他们的图像处理实用程序，这需要一些设置，但一旦您通过艰难的工作就可以正常工作工作

last option是使用＆＃34;隐藏＆＃34;由Google提供的服务，可能不稳定。可以使用以下URL访问此选项：

https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy

将C={}，url，container（缓存时间），refresh和resize_w作为url参数。我已经对此进行了测试，截至目前（发布时间），它仍然有效。

Answer 2

您可以使用min_height，min_width选项，请参阅Supersized documentation

jQuery(function($) {
    $.supersized({
        slides: [{
            image: "/images/heritage/background.jpg",

        }],
min_height:350,
min_width:450
    });
});

如何在jQuery中设置宽度和高度

2 个答案: