图片显示不全

使用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>


HUMILITY
75 声望6 粉丝

DONT WASTE YOUR TIME