您的位置:首页 > div css问集 > 【 返回上一页

css 图片宽度高度固定控制

DIV CSS图片宽度高度固定控制篇

常常遇到使用CSS对图片进行宽度高度控制,一般对图片img进行固定控制其宽度高度,为了排版整齐美观,如下图这样的图片排版即需要控制其高和宽度实现。


图片列表需要控制宽度和高度截图

一、对对象内的图片设置固定宽度高度
假如ul li列表型图片排列进行高度和宽度设置,ul父级为“.thinkcss”,对图片控制宽度为120px,高度为90px。

设置CSS代码如下:
.thinkcss ul li img{width:120px;height:90px}
这样就控制了“.thinkcss”对象内ul li列表对象内img图片宽度120px高度90px

二、通过CSS直接对图片img设置固定宽度和高度
直接对img设置css选择器样式,直接对Img赋予CSS样式。

比如:
<img src="图片地址" class="thinkcss" />
这样我们就直接在img标签加入class样式,假如我们还是设置固定宽度和高度分别为120px和90px

对应css代码:
.thinkcss{width:120px;height:90px}

img.thinkcss{width:120px;height:90px}

说明:
Img.thinkcss这个表达式,只有img标签使用了“.thinkcss”类CSS样式才能生效。

三、直接图片img标签内设置宽度和高度
<img src="图片地址" width="120" height="90" />
这样就直接对img标签假如宽度和高度值,需要注意是不需要跟html单位。

相关阅读
1、css img
2、css 图片最大宽度
3、css width
4、css height
5、html img标签语法结构

相关标签: 宽度 高度 图片
如需转载,请注明文章出处和来源网址:https://www.thinkcss.com/wenti/446.shtml

日期:2013-03-25 21:33 www.thinkcss.com ThinkCSS