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

图片显示不全

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理