共计 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>
正文完