图片显示不全
使用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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。