首页 > 数码 正文

网页中图片属性固定宽度,如何用js改变大小

时间:2023-09-24 作者:佚名

后台上传图片后,都有一个图片属性,会指定图片的宽和高,如果图片固定了宽度和高度,PC端用max-width可以控制最大宽度,高度自动缩放。但是手机端就没法自动缩放,可以使用js来改变图片的style,通过100%比例,当然也可以设置px固定的高度宽度。

html默认样式:
<div class="news_infos"id="newsp">
<p><img src="images/v1.jpg" style="width:300px;height:100px"></p>
</div>

CSS:

.news_infos img { max-width: 650px;height:auto; }

js:
<script type="text/javascript">
var aImg=document.getElementById("newsp").getElementsByTagName('img');
for(var i=0;i<aImg.length;i++){
aImg[i].style.height="100%";
aImg[i].style.width="100%";
}
</script>

或者 方法二:

<script type="text/javascript">
var aImg=document.getElementById("newsp").getElementsByTagName('img');
for(var i=0;i<aImg.length;i++){
aImg[i].style.height="auto";
aImg[i].style.width="auto";
}
</script>

html更改后:
<div class="news_infos"id="newsp">
<p><img src="images/v1.jpg" style="width:100%;height:100%"></p>
</div>


100%这个方案不是很完美,如果图片上传的大小没有超过650,那么PC端图片会被放大。还有一种解决方案就是,编辑后台内容的时候,将图片属性后面的width,height值都删掉,让css来控制就行了。同样用max-width来控制图片大小,小图<650px,图片不会被更改,>650px,图片宽度就是650px。,那么手机端就用100%来表示。

方法三 CSS:

.news_infos img { max-width: 650px;height:auto; }

@media only screen and (max-width: 480px) {
.news_infos img {width:100%;}
}


这个的不好的地方就在于,每次编辑图片属性,都得删除后面的width,比较繁琐。

以上方法,都可以实现,但是100%,和设置宽度这两种方法都不完美, 如果以前图多,已经固定了宽度,建议使用方法二

本文信息为网友自行发布旨在分享与大家阅读学习,文中的观点和立场与本站无关,如对文中内容有异议请联系处理。

本文链接:https://www.paituo.cc/tech/1038679.html

  • 小编推荐

    苹果手机共享,苹果手机共享介绍与注意事项

    本文讲述苹果手机共享,苹果手机共享介绍与注意事项,简介如下1.苹果手机共享是什么? 苹果手机共享是一项可供多人共享使用一个苹果设备的服务。与云存储不同,苹果手机共享赋予多个用户**的系统空间,允许他们在单一设备上安装个...

    H3C路由器不能传递的故障如何解决

    本文讲述H3C路由器不能传递的故障如何解决,简介如下在使用路由器的过程中,难免会遇到各种各样的故障,本文主要以H3C路由器为例,为大家分析在路由组网环境中,上游不能被下游学习到故障的原因和解决步骤,相信对大家一定...

    聚划算的东西是正品吗和聚划算的便宜到底香不香

    本文讲述聚划算的东西是正品吗和聚划算的便宜到底香不香,简介如下这是仙人JUMP的第144篇原创1据说每一个爱网购的女孩子都长了一双火眼金睛,能够在无数的垃圾信息中精准的选到自己想要的商品,还自带正品过滤功能,一目了然就能看...

    抖音短视频怎么玩和抖音新手小白入门全攻略

    本文讲述抖音短视频怎么玩和抖音新手小白入门全攻略,简介如下好多想入驻抖音,想通过抖音挣点收益的朋友,不了解如何做,不了解怎么入门,今天小马哥就给新手朋友们分享一份全面的入门攻略,供新手朋友们参考了解。我将从6个方面来给...

    耳机没声音怎么设置和电脑前置耳机没声音怎么办

    本文讲述耳机没声音怎么设置和电脑前置耳机没声音怎么办,简介如下有很多小伙伴反映在将自己的耳机连接到主机前面时没有声音,这是怎么回事呢,遇到这种情况应该怎么解决呢,下面小编就给大家详细介绍一下电脑前置耳机没声音的解决方法,有...

    又一家厂商推出WiFi7芯片!

    又一家厂商推出WiFi7芯片!,简介如下又一家厂商推出WiFi7芯片!老牌芯片厂商Broadcom推出其首款支持WiFi 7的芯片组和相应的SoC!虽然WiFi规范可能要到2024年才能获得批准,但似...

    无线路由器不知道怎么买 家用无线路由器怎么买

    无线路由器不知道怎么买 家用无线路由器怎么买,简介如下在智能手机、智能家居产品已经普及的今天,WiFi已经成为每个家庭都无法缺少的生活必需品。对很多用户来说,选无线购路由器并不是一件轻松的事情。原因在于他们对产品介...

    体验Redmi路由器AX3000 Redmi路由器AX3000

    体验Redmi路由器AX3000 Redmi路由器AX3000,简介如下在Wi-Fi 6路由器的普及浪潮中,Redmi是冲在前面的品牌之一,去年发布的Redmi路由器AX5凭借不到300元的售价,获得了不少消费者的青睐。一年后,AX...