2024年04月10日 懒猪技术
后台上传图片后，都有一个图片属性，会指定图片的宽和高，如果图片固定了宽度和高度，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>
方法三 CSS：
.news_infos img { max-width: 650px；height:auto; }
@media only screen and (max-width: 480px) {
.news_infos img { width：100%; }
}
本文链接：http://so.lmcjl.com/news/1748/