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

【问题标题】：How to set width and height in jQuery如何在jQuery中设置宽度和高度
【发布时间】：2015-04-24 03:15:56
【问题描述】：

我有一张背景图片，我正在尝试通过指定所有图片的高度和宽度来优化网站。我不知道如何将宽度设置为 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>

【问题讨论】：

标签： javascript jquery styles height width

【解决方案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（通过O={} 参数），调整大小（通过S={} 参数），或通过C={} 参数裁剪。但是，resrc.it 是一个付费 API，可免费试用 30 天。

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

您也可以通过 Google AppEngine 托管您的网站，或者通过其托管您自己的 CDN 以利用他们的图像处理实用程序，这需要进行一些设置，但是一旦您完成了艰苦的工作，就可以正常工作。

last option 是使用谷歌提供的“隐藏”服务，可能不稳定。可以使用以下 url 访问此选项：

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

接受url、container、refresh（缓存时间）、resize_w和resize_h作为url参数。我已经对此进行了测试，到目前为止（发布时间），它仍然有效。

【讨论】：

我要做的是优化页面。我通过gtmetrix.com 运行它。我需要为实际的 .jpg 设置宽度和高度属性，然后我假设 supersized 将从那里获取它。它返回以下错误：以下图像缺少宽度和/或高度属性：=>>>wacoaircraft.net/images/heritage/background.jpg（尺寸：450 x 300）

【解决方案2】：

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

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

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

【讨论】：