图片显示不全

应用CSS援用图片,图片因太大无奈齐全显示在box中,仅能显示局部
通过其余操作依然没有变动如图所示:

解决方案
在CSS款式设置中援用图片后设置宽高各为100%,box宽高依据需要

<style>    #box{        ...        width: 650px;        height: 450px;        ...    }    #imgList li {        ...        width: 550px;        height: 350px;        ...    }</style><body>    ...    <!-- 宽高设置为100%便解决图片显示不齐全问题,图片越大加载工夫越长-->    <li> <img src="imgs/0.jpg" height="100%" width="100%"> </li>     ...</body>

图片设置浮动但没有成果

起因:父集宽度设置太小,无奈向左浮动(以float:left为例)

解决方案
依据图片数量及边距设置宽度,或最大宽度

<style>  ...  #imgList {    ...    <!--550*5+(50*2)*5=3250px-->    width: 3250px;      ...  }  #imgList li {    ...    <!--设置向左浮动-->    float: left;    padding: 50px;    width: 550px;    ...  }</style><body>    ...    <ul id="imgList">        ...        <!-- 宽高设置为100%便解决图片显示不齐全问题,图片越大加载工夫越长-->        <li> <img src="imgs/0.jpg" height="100%" width="100%"> </li>         ...    </ul>    ...</body>