努力在html中适配图片尝试失败

目的是实现瀑布流式的图片分布,试了小分辨率的图片可以,然而换成手机拍摄的图片就不行了

在这里插入图片描述
注意看看右边的比例,图片已经被放大到了丧心病狂的程度。

  • 代码

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1" />  
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
     
<div id="butong_net_left" style="overflow:hidden;max-width:100%;
                        max-height:100%;
                        
                        ">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="butong_net_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">

<td><img  src="feng1.jpg"></td>
                        <!--<td><img src="feng2.jpg"></td>
<td><img src="feng3.jpg"></td>
<td><img src="feng4.jpg"></td>  -->

</tr>
</table>
</td>
<td id="butong_net_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=1//速度数值越大速度越慢
butong_net_left2.innerHTML=butong_net_left1.innerHTML
function Marquee3(){
if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=0)
butong_net_left.scrollLeft-=butong_net_left1.offsetWidth
else{
butong_net_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
butong_net_left.onmouseover=function() {clearInterval(MyMar3)}
butong_net_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>

     
</body>
</html>
  • 尝试

    • 因为自己并没有学过html,所以就只能依样画葫芦的修改一下网上的代码。
      http://www.cnblogs.com/cainiao-Shun666/p/6622678.html
      参考这篇文章,激动地我以为要成功了。结果发现图片下半部分全被截掉了,。在这里插入图片描述
      • 我怀疑是overflow属性,再尝试搜索了一下overflow属性,发现是对溢出的内容提供滚轮处理,明显和我们的要求不相符。
        http://www.w3school.com.cn/tiy/t.asp?f=csse_pos_overflow_auto
      • 所以到底是哪个属性可以让图片压缩显示呢???
        未完待续!!
        在这里插入图片描述
        好像看到偷着乐的自己 ^ _ ^
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值