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

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，它提供 compression/optimization （通过 O={} 参数）、调整大小（通过 S={} 参数）或通过 C={} 参数裁剪。但是，resrc.it 是付费的 API，可以免费试用 30 天。

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

您也可以在 Google AppEngine 之外托管您的站点，或者在 AppEngine 之外托管您自己的 CDN 以利用他们的图像处理实用程序，这需要一些设置，但一旦您完成后就可以正常工作历经千辛万苦。

last option是使用Google提供的"hidden"服务，可能不稳定。可以使用以下 url:

访问此选项

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

将 url、container、refresh（缓存时间）、resize_w 和 resize_h 作为 url 参数.我已经对此进行了测试，截至目前（post 时间），它仍然有效。

Answer 2

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

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

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

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

How to set width and height in jQuery

javascript

jquery

styles

height

width