Question

当我将100％作为图像的宽度时，它并不完全适合屏幕。

   <html><meta name='viewport' content='width=400, user-scalable=no'> <title>Community Feed </title><body bgcolor='#2E9AFE'><div class='entire'><center><font face='HelveticaNeue-Light' font size='5'><img src=http://cdn.bithumor.co/pro_pics/default.jpg class='pro_pic'><br>Hilardy</center><img class='upload' src=http://cdn.bithumor.co/uploads/test.gif
 width='100%' ><center>Modern Day Creepers</center><br><center><a style='text-decoration:none' href=http://bithumor.co/like.php?type=post&id=33><img src='http://bithumor.co/likebutton.png' width='50' height='50'><br></a><br></center></div><br><div class='entire'><center><font face='HelveticaNeue-Light' font size='5'><img src=http://cdn.bithumor.co/pro_pics/59iJl41V_400x400.jpeg     class='pro_pic'><br>BitHumorKing</center><img class='upload' src=http://cdn.bithumor.co/uploads/image.jpg width='100%' ><center>Test :)</center><br><center><a style='text-decoration:none' href=http://bithumor.co/like.php?type=post&id=18><img src='http://bithumor.co/likebutton.png' width='50' height='50'><br></a><br></center></div><br><div class='entire'><center><font face='HelveticaNeue-Light' font size='5'><img src=http://cdn.bithumor.co/pro_pics/default.jpg class='pro_pic'><br>Hilardy</center><img class='upload' src=http://cdn.bithumor.co/uploads/schoolsucks.jpg width='100%' ><center>School is Hell</center><br><center><a style='text-decoration:none' href=http://bithumor.co/like.php?type=post&id=17><img src='http://bithumor.co/likebutton.png' width='50' height='50'><br></a><br></center></div><br><div class='entire'><center><font face='HelveticaNeue-Light' font size='5'><img src=http://cdn.bithumor.co/pro_pics/default.jpg class='pro_pic'><br>Test</center><img class='upload' src=http://cdn.bithumor.co/uploads/KjXsUgfV.jpg width='100%' ><center>Test</center><br><center><a style='text-decoration:none' href=http://bithumor.co/like.php?type=post&id=13><img src='http://bithumor.co/likebutton.png' width='50' height='50'><br></a><br></center></div><br><div class='entire'><center><font face='HelveticaNeue-Light' font size='5'><img src=http://cdn.bithumor.co/pro_pics/default.jpg class='pro_pic'><br>Test</center><img class='upload' src=http://cdn.bithumor.co/uploads/IntroducingBitHumor-1-2.png width='100%' ><center>Test</center><br><center><a style='text-decoration:none' href=http://bithumor.co/like.php?type=post&id=12><img src='http://bithumor.co/likebutton.png' width='50' height='50'><br></a><br></center></div><br><div class='entire'><center><font face='HelveticaNeue-Light' font size='5'><img src=http://cdn.bithumor.co/pro_pics/default.jpg class='pro_pic'><br>Test</center><img class='upload' src=http://cdn.bithumor.co/uploads/bh_info-1.jpg width='100%' ><center>Test</center><br><center><a style='text-decoration:none' href=http://bithumor.co/like.php?type=post&id=9><img src='http://bithumor.co/likebutton.png' width='50' height='50'><br></a><br></center></div><br><div class='entire'><center><font face='HelveticaNeue-Light' font size='5'><img src=http://cdn.bithumor.co/pro_pics/default.jpg class='pro_pic'><br>Test</center><img class='upload' src=http://cdn.bithumor.co/uploads/introducingbithumor.png width='100%' ><center>Test :)</center><br><center><a style='text-decoration:none' href=http://bithumor.co/like.php?type=post&id=8><img src='http://bithumor.co/likebutton.png' width='50' height='50'><br></a><br></center></div><br><style>
.entire {
background-color:#2E9AFE;
width: 100%;
}
.pro_pic {
    width: 50px;
    height: 50px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(http://link-to-your/image.jpg) no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    }
</style>

我该如何解决这个问题？

Answer 1

删除默认情况下浏览器添加的默认margin和padding：

*{
    padding: 0px;
    margin: 0px;
}

将此添加到其他CSS的顶部。

Updated jsFiddle

<img/>不适合屏幕（100％）

1 个答案: