文章/答案/技术大牛

发布

jquery 图片拉伸缩小

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。图片拉伸缩小是指通过 JavaScript 或 jQuery 对图片的尺寸进行调整，使其适应不同的显示需求。

类型

固定尺寸：将图片设置为固定的宽度和高度。
按比例缩放：保持图片的宽高比，同时调整其尺寸。
响应式缩放：根据窗口大小或父容器的尺寸动态调整图片大小。

应用场景

网站布局：确保图片在不同设备上都能良好显示。
图像预览：在用户上传图片时，实时显示缩略图。
广告展示：根据广告位的大小动态调整广告图片的尺寸。

示例代码

以下是一个使用 jQuery 实现图片按比例缩放的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 图片拉伸缩小</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .container {
            width: 300px;
            height: 200px;
            border: 1px solid #ccc;
        }
        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <img id="myImage" src="path/to/your/image.jpg" alt="示例图片">
    </div>

    <script>
        $(document).ready(function() {
            function resizeImage() {
                var containerWidth = $('.container').width();
                var containerHeight = $('.container').height();
                var img = $('#myImage');

                // 获取图片的原始尺寸
                var imgWidth = img.width();
                var imgHeight = img.height();

                // 计算缩放比例
                var widthRatio = containerWidth / imgWidth;
                var heightRatio = containerHeight / imgHeight;
                var ratio = Math.min(widthRatio, heightRatio);

                // 设置图片的新尺寸
                img.css({
                    width: imgWidth * ratio,
                    height: imgHeight * ratio
                });
            }

            // 初始化时调整图片大小
            resizeImage();

            // 窗口大小改变时重新调整图片大小
            $(window).resize(resizeImage);
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：图片拉伸后失真

原因：图片的宽高比被破坏，导致图片变形。

解决方法：保持图片的宽高比，使用按比例缩放的方法。

var widthRatio = containerWidth / imgWidth;
var heightRatio = containerHeight / imgHeight;
var ratio = Math.min(widthRatio, heightRatio);
img.css({
    width: imgWidth * ratio,
    height: imgHeight * ratio
});

问题：图片加载缓慢

原因：图片文件过大，网络传输时间长。

解决方法：优化图片文件大小，使用图片压缩工具或服务。

问题：图片在不同设备上显示不一致

原因：不同设备的屏幕尺寸和分辨率不同。

解决方法：使用响应式设计，根据设备的屏幕尺寸动态调整图片大小。

$(window).resize(resizeImage);

通过以上方法，可以有效解决 jQuery 图片拉伸缩小过程中遇到的常见问题。

页面内容是否对你有帮助？

有帮助

没帮助

控件背景不能按我想要的方式显示

、、、

它所在的控件设置为左右锚定，图像在控件上设置为拉伸。这是当控件被拉伸时背景图像的样子。显然，我希望它看起来像顶部的边缘。

浏览 3提问于2012-03-21得票数 0

回答已采纳

2回答

UIButton图像大小

、、

因为这是一张照片，我认为拉伸是没有意义的。谢谢!

浏览 2提问于2013-06-11得票数 0

回答已采纳

1回答

当iPhone移动到横向时，将滚动视图中的图像限制为拉伸

、、、、

如果用户正在查看肖像图片(320x480)，并在横向移动iPhone -图像将拉伸以占据整个屏幕。我想将图像限制为拉伸。我想要一个类似于照片应用程序的功能，其中图像被缩小，并在左侧和右侧显示黑色条带。任何人有任何建议，我可以做到这一点-将是一个很大的帮助！

浏览 0提问于2009-07-30得票数 0

回答已采纳

2回答

安卓相机getSupportedPreviewSizes()错误

、、

我正在三星Galaxy上测试我的Android应用程序。当我在平板电脑上打开相机应用程序时，我看到您可以为摄像机设置的可能分辨率是：

浏览 3提问于2014-08-09得票数 0

回答已采纳

1回答

使用CGAffineTransformMakeScale时的图像缩放

、

我有这个UIImageview，里面有一张图片。这是一张很小的图片，上面贴着方法。这对独立于屏幕大小的图像非常有用，而且效果很好:如果我以编程方式更改UIImageview的帧大小，里面的图像不会被拉伸，而是会重复，因此像素仍然是像素。self.myImageView.transform=CGAffineTransformMakeScale(5.0, 5.0); 对于包含/显示该图像的UIImageview，我注意到图像现在实际上是拉伸的简而言之，问题是:

浏览 0提问于2013-05-07得票数 0

回答已采纳

1回答

如何在UWP中放大滚动查看器，同时保持滚动查看器的宽度和高度被拉伸以适应父面板或网格列？

、、、、

请看下面的图片。一个是78%的缩放，但整个内容被缩小，但没有拉伸到它的父控件，尽管水平和垂直对齐设置为“拉伸”。

浏览 2提问于2020-05-21得票数 0

3回答

只有当图像比页面更宽时，才使用CSS缩放图像

但是，如果图像比页面宽，我只希望水平缩放图像-换句话说，我从来不想拉伸图像以适应，只是缩小它。.img {width: 100%; height: auto;} .img {max-width: 100%; height: auto} ..。似乎什么都没做。有什么(CSS专用的-恐怕jQuery不是一个选项)来实现这一点吗？

浏览 5提问于2013-06-14得票数 3

回答已采纳

2回答

PictureBox映像不会收缩，但是PictureBox本身会展开以适应图像。

、、、

当我在运行时向窗体添加picturebox时，picturebox的操作与我想要的完全一样。但是当我将它添加到面板中时，pictureBox就会展开以适应图像。private PictureBox globalPicBox = (PictureBox)null; { this.globalPicBox.Name = "a"; this.globalPicBox

浏览 4提问于2014-01-09得票数 3

回答已采纳

1回答

UIImage显示为不透明正方形(IOS Swift)

、、、、

所以我有这个图像视图：当我将其添加为按钮的UIImage时，得到的按钮只是一个填充的粉红色不透明正方形。我不明白为什么会发生这种事。

浏览 0提问于2017-03-24得票数 0

1回答

布局在不同的设备中被打破

、、

正如我所附的第一张图片没有缩放。而我附加的第二个屏幕是放大后的文件。所以，当我放大或缩小时，布局是拉伸的，那么如何在css中解决这个问题 1.这张图片没有缩放，布局也很好。正常屏幕 ?

浏览 29提问于2021-08-23得票数 1

1回答

自动将WinForms面板垂直展开到容器底部

我试图建立以下行为:当隐藏底部(蓝色)面板时，我希望顶部(红色)面板垂直拉伸，反之亦然(隐藏红色面板应该展开蓝色)。很难从最右边的图片中看到，但是下面的表行并没有随着面板的缩小而缩小。桌面布局面板不是我的要求，但我希望它能提供一个解决方案。

浏览 1提问于2013-10-10得票数 1

回答已采纳

1回答

如何将图像滑块与缩放图像组合在一起？

、

我有点进退两难，因为我似乎不能让jquery图像循环器处理缩放图像。我也希望使用作为插件来做图像滑块(因为我之前已经使用过无数次了)。问题是，我需要回拉的效果(即。缩放图像)，但使用滑块。我尝试过使用其他插件进行拉伸，但大多数插件似乎只允许图像缩小(如果窗口缩小)，而不是向上缩放。我不能使用backstretch，因为它占据了整个body

浏览 1提问于2012-04-13得票数 0

2回答

如何在picturebox控件中调整图片

、

我的窗体中有一个SizeMode = StretchImage的picturebox控件当我加载250X50图片时-图片看起来很好。如何修复它？

浏览 7提问于2010-10-04得票数 2

回答已采纳

2回答

我如何调整大小/裁剪图像的大小，以适应背景大小:封面的情况？

、、、

我正在建立一个响应网站使用引导3&我需要一个图片库。客户端希望自己更新图库。-image必须在div中垂直和水平地居中。我需要对普通图像做一些类似的事情(除非有人知道一个图片库将支持图像的“背景-图像:掩护”？)：注意: JQuery/Javasript可以使用&上传时调整大小不是一个选项;

浏览 4提问于2014-02-10得票数 0

1回答

背景覆盖+视差

、、、、

moz-background-size:cover;-ms-background-size:cover;} 视差插件: jQuery

浏览 0提问于2014-04-29得票数 0

1回答

如何给div或IMG一个“最小大小”

、、、

我有这两张50px x 50px的图片。它们每个都被锁定在50px*50px的div中。当用户使用全页缩放来缩小页面大小时，我不希望它们缩小。实际上，我想要图像缩放，默认情况下，大约75px乘75px，我希望他们缩小到最小的50px。有人能告诉我怎么做吗？我可以以某种方式拉伸图像，占据100%的div，然后默认设置为div 75px吗？

浏览 2提问于2012-04-26得票数 0

回答已采纳

1回答