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

原创 新起点博客  2020-04-27 22:09 
【上云必备】上云仅?102/年

后台上传图片后,都有一个图片属性,会指定图片的宽和高,如果图片固定了宽度和高度,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.henenseo.com/archives/1743
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情