开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js图片自适应宽度高度

基础概念

JavaScript 图片自适应宽度和高度是指根据显示容器的大小自动调整图片的尺寸，以确保图片在不同设备和屏幕尺寸上都能正确显示。

相关优势

响应式设计：确保网站在不同设备上都能提供良好的用户体验。
性能优化：避免加载过大的图片，减少带宽消耗。
简化布局：减少手动调整图片尺寸的工作量。

类型

固定宽高比：保持图片的宽高比不变，根据容器大小调整尺寸。
完全自适应：图片完全填充容器，可能会改变宽高比。

应用场景

网站首页：确保主图在不同设备上都能完美展示。
产品列表：商品图片需要适应不同屏幕尺寸。
社交媒体分享：图片在不同社交平台上都能正确显示。

示例代码

以下是一个简单的示例，展示如何使用JavaScript实现图片自适应宽度和高度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Resize</title>
    <style>
        .container {
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            position: relative;
        }
        .responsive-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* or 'contain' depending on your needs */
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="your-image.jpg" alt="Responsive Image" class="responsive-img">
    </div>

    <script>
        function resizeImage() {
            const container = document.querySelector('.container');
            const img = document.querySelector('.responsive-img');

            img.style.width = container.clientWidth + 'px';
            img.style.height = container.clientHeight + 'px';
        }

        window.addEventListener('resize', resizeImage);
        window.addEventListener('load', resizeImage);
    </script>
</body>
</html>

遇到的问题及解决方法

问题1：图片加载时出现闪烁

原因：图片在加载时尺寸未正确设置，导致页面布局重新计算。

解决方法：

使用CSS设置初始尺寸。
在图片加载完成后调整尺寸。

img.onload = function() {
    resizeImage();
};

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

原因：不同设备的像素密度不同，导致图片显示效果不一致。

解决方法：

使用srcset属性提供不同分辨率的图片。
使用CSS媒体查询调整图片尺寸。

<img src="small.jpg"
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
     alt="Responsive Image">

通过以上方法，可以有效解决图片自适应宽度和高度时遇到的常见问题，确保图片在不同设备和屏幕尺寸上都能正确显示。

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

有帮助

没帮助

相关·内容

iframe自适应高度和宽度

iframe自适应高度和宽度可以通过onload事件来操作,如: <iframe id="iframe-5566" name="iframe-5566" frameborder="0" width="100%...$(ifm).width(ifm.contentWindow.document.body.scrollWidth); }catch(e){ $(ifm).height(320);//默认高度...$(ifm).width(320); //默认宽度 } } 但是如果 iframe的高度是动态的呢?

3.8K3 0

iframe自适应高度和宽度_自适应框架

ifm_content.contentDocument; if (iframe == “content”) { //如果传入Ifame Id 等于content 重新给iframe赋值高度

2.9K4 0

vue之H5图片高度根据宽度自适应

每个图片原始宽高不一样，缩小每个图片到指定的宽度，高度等比例缩小，实现图片高度自适应。...下面看看实现代码：下面是uniapp的条件编译，如果是小程序场景就使用 mode 属性实现高度自适应，如果是H5场景，就通过图片的 load 获取图片的宽高，然后通过计算出缩小后的宽高动态渲染到页面...-- #endif --> js代码：this.$forceUpdate() 是强制更新视图，因为页面加载的时候，图片设置宽高时是没有 img_width的。...80是需要设置的图片高度，图片的高度根据这个值等比缩小 methods: { dialImgLoad(e){ let idx = e.currentTarget.id;...$forceUpdate() } } css代码：设置一个默认宽度，这里仅小程序会生效，H5会被 style 属性覆盖。

2.8K2 0

微信小程序实现image图片宽度100%，高度自适应

微信小程序默认给 image 设置了宽高，所以单独设置宽度或者高度就会出现变形的问题。 ?...样式设置宽度100% .img{ 　　width: 100%; } 添加属性 mode="widthFix" <image class="img" src="/images/hello.png" mode

2.4K3 0

小程序轮播图片高度自适应

微信小程序中使用 swiper 组件可以实现图片轮播效果，但是默认 swiper 高度是固定的 150px，如果项目中图片大于固定高度就会被隐藏，所以本篇文章要实现轮播图片的高度自适应。...1.以最高的图片为基准（需要考虑图片全部一样的大小）关于小程序轮播图自适应的问题，目前网上的资料不少，但是都是目前这种，不会随着图片的高度去变化。会以最高的一张图片高度为基准。...var imgheight = e.detail.height; //获取图片实际高度 var imgwidth = e.detail.width; //获取图片实际宽度...,记得给image加上mode=“widthFix”这个属性哦， //还有就是设置这个image 100%宽度 //getswiperImgH 中打印的图片的src发现顺序有时和图片真实的顺序是不一致...//图片宽度 let imgw = e.detail.width; //计算的高度值 let swiperH = (winWid * imgh) / imgw + "px";

1.8K3 0

JavaScript 获取图片的宽度和高度的方法

因为加载图片是异步的，在图片的相关数据没有加载完之后，宽高都是默认为0，所以我们要给imgDom增加个onload方法。

2.7K2 0

内层图片元素高度自适应，外层盒子高度如何保持跟图片高度一致？

在开发的过程中，外层盒子高度不确定的情况下，想要跟内层图片高度保持一致，内层图片高度设为width:100%;height:auto;外层box高度也是width:100%;height:auto.为什么会比图片本身到高度超出去一部分呢...外层box如何可以跟内层不确定高度的图片高度保持一致呢？ <!

9333 0

js获得浏览器高度和宽度参数

==> 可见区域高度在FireFox中： document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度...document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度...==> 页面对象宽度（即BODY对象宽度加上Margin宽） document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）...（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） Opera为： document.documentElement.clientWidth...==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） /

6.1K4 1

iframe的高度自适应_div自适应高度

，搜索iframe 高度自适应，结果2W多条。...而这几篇原创里面，基本上只谈到如何自适应静的东西，就是没有考虑到JS操作DOM之后，如何做动态同步的问题。另外，在兼容性方面，也研究的不彻底。这篇文章，希望在这两个方面再做一些深入。...可能有人还没接触到这个问题过，先说明一下，什么是自适应高度吧。...传统做法大致有两个：方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。...方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。

7.1K4 0

移动端两端对齐 + 图片宽度自适应

自适应四宫格有这样一张设计稿，左右两边白色间距为4px，中间间距为10px，每一行的两张图是等宽的（即平分去掉间距后的宽度）有一种方法是和设计师商量，把所有的具体尺寸改为百分比尺寸。。...这个布局不太好写的主要原因是，在宽度上，百分比（50%）与实际尺寸（4px 10px）混杂，所以做到宽度自适应的话会有困难。...下面是正经的一种写法：图片单元float，宽度设置为50%，奇数单元设置margin-right为10px, 偶数单元设置margin-right为-10px。...父元素设置左padding为4px，右padding为14px，父元素的padding值正好是所有间距的总和，所以它实际宽度的50%是正好符合需求的图片单元宽度。...，图片单元设置padding-top为一个百分比，这个百分比为设计稿中图片的宽高比。

1.5K4 0

iframe自适应高度_iframe根据内容自适应高度

1、iframe自适应页面高度首先需要给iframe设置一个id，不需要滚动条则加上scrolling=”no” 然后加上一个onload事件 function iFrameHeight...id="compInfo" frameborder='0'scrolling="no" οnlοad="iFrameHeight(this)"> 2、若需要iframe固定一个高度...，超过这个高度才自适应 function iFrameHeightContact(iframe) { var ifm= document.getElementById(iframe.id);...' id="compInfo" frameborder='0'scrolling="no" οnlοad="iFrameHeight(this)"> * 400则为你想要固定的高度

5.1K3 0

分页居中-圆角宽度自适应宽度（经典）

/xhtml"> 分页居中/圆角宽度自适应...font-family:Tahoma;} .cutpage a{display:inline-block; background:url(http://www.lanrentuku.com/down/js...3px 3px 3px 0; vertical-align:middle;} .cutpage a span{ background:url(http://www.lanrentuku.com/down/js...; height:17px; line-height:17px;} .cutpage a.current{background:url(http://www.lanrentuku.com/down/js...13255921110.png) left -17px no-repeat;} .cutpage a.current span{background:url(http://www.lanrentuku.com/down/js

2.5K7 0

JavaScript获取高度和宽度

window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度...：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth

3.7K6 0

自适应页面高度

因为即使是同一分辨率，页面中的实际高度也不同。不过非常遗憾，网上的文章可谓无数，但基本都不能解决问题。...2、基本讲的都是用CSS来自适应页面高度，这里不是这个问题。 ...document.getElementById("I1").contentWindow.document.body.scrollHeight } 参考：控制IFrame大小，不显示滚动条的方法使用JS...parent……），对于一些将主页面和嵌入式页面放在不同主机的用户来说，就不能使用了，因为这是一个跨域访问方法二是一种不错的办法，但由于不需要和主页面通信，当主页面显示速度很快时，嵌入式页面的JS

2.7K7 0

div高度自适应

IE7 高度自适应 .boxwrapper { height: 500px; } .box { width: 200px...; min-height: 200px; _height: 200px; border: 1px solid #ccc; } 内容高度小于...200px test test test test test 内容高度大于200px效果 test test test test test test test test test test test

1.8K2 0

PHP获取图片宽度高度、大小尺寸、图片类型、用于布局的img属性

//php自带函数 getimagesize() $img_info = getimagesize('tomener.jpg'); echo '

';
...
2.8K80

bootstrap 表格插件bootstrap-table的js设置高度及高度自适应

用js控制bootstrapTable的高度有几种方法 1、 ...$(window).height() - 120 }); 两者的区别是table元素中第二种方法是含有data-toggle="table" 及data-height="350",js...，当内容的高度大于窗口的高度就有滚动条，当内容的高度小于窗口的高度，container的高度设置为内容的高度完整的js如下： $(document).ready(function() { //...设置bootstrapTable起始的高度 $('#tableTest1').bootstrapTable({ height: $(window).height() - 120 });...//当表格内容的高度小于外面容器的高度，容器的高度设置为内容的高度，相反时容器设置为窗口的高度-160 if ($(".fixed-table-body table").height() < $

21.7K2 0

textarea 高度自适应

textarea 高度自适应页面代码 <span style="color...//$(this).css('height', 'auto').css('height', this.scrollHeight + 'px'); }); 参考资料： textarea 高度自适应

1891 0

实现自适应高度

天修改一个用Excel的报表,有一个数据格是跨两列,一般单格的数据格用自动换行就可以实现自适应高度,但是跨列是不行的.查找google良久,也没发现适合的办法,一阵头痛之后,突然有了灵感,于是马上做试验...原理:在另外一个sheet里面利用单元格换行和自适应高度的特性,将一个试验单元格宽度设置成实际跨列单元格的宽度,然后将需要输入的字符放入该试验单元格,取得高度返回给实际跨列单元格就可以了

1.1K1 0

UIWebView自适应高度

//webview自适应高度 delegate里面实现 (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *height_str

8322 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭