css如何调整无序列表图片大小

html-css023

css如何调整无序列表图片大小,第1张

如果是图片的尺寸太大，要修改小一些。这种情况，通常都是使用雪碧图或者字体图标来做的。当然如果这些都不能满足你的需求，你也可以直接放图片，可以自己处理一张符合你需求的尺寸图片，也可以忽略图片的大小，然后使用css调整图片的尺寸大小即可，但是像素可能会被压缩。所以要根据自己的具体需求使用比较合适的解决方案。下面给你写一个案例。你可以参考是否符合自己的需求

这个是要看你如何加载列表项目图片了。如果你是在列表的CSS定义里用背景图片往里加载列表项目图片的话，那只能你自己在其他的平面软件里改好图片尺寸后再定义后加载进去了，不能用CSS直接修改；如果你是在结构标签里的每个列表前面把图片用<img>的形式插入，那么你可以在CSS里统一定义display:black

之后就可以定义height和width了。不过比较麻烦。

1、新建一个html文件，命名为test.html，用于讲解。

2、在test.html文件内，创建一个div模块，并设置其class属性为mydiv。

3、在div模块内，使用img图片标签创建两张图片，src属性指向不同的图片路径。

4、在css标签内，使用“*”初始化页面所有元素的css样式，设置内边距为0，外边距为0。

5、在css标签内，设置div的样式，设置其宽度为700px，高度为400px，边框为1px，居中对齐。

6、在css标签内，设置图片的的大小，宽度为280px，高度为200px，为了使用图片水平排列，需要使用float属性设置图片浮动的统一方向，例如，这里设置统一浮动向左。

7、在浏览器打开test.html文件，查看图片水平排列的效果。