关于前端:CSS图片显示不全-浮动无效-解决方案

6次阅读

共计 651 个字符，预计需要花费 2 分钟才能阅读完成。

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

正文完