图片显示不全
应用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>