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

41次阅读

共计 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>

正文完
 0