今天我们分享关于图片样式的内容。在css中,对于图片的大小,我们使用width和height两个属性来定义。语法:
width:像素值;height:像素值;
示例代码:
图片大小 img { width:100px;height:80px;}
图片的实际大小与设置大小不是正相关的,也就是图片在Photoshop中的宽度高度,在设定网页宽度高度时,可以参考,但是不用严格遵守,我们设置图片的宽度和高度,目标是为了让图片在网页中呈现出想要的效果。图片边框border:语法:
border-width:像素值;border-style:属性值;border-color:颜色值;
这个边框和元素边框是一样的,比较常用的是简洁写法。示例代码:
图片边框 img { width:100px; height:80px; border-width:1px; border-style:solid; border-color:red; }
如果我们在图片的边框上加hover的效果,
加hover img { width:100px; height:80px; border:1px solid blue; } img:hover { border:1px solid green;}
图片水平对齐:在文本中需要水平对齐时,使用text-align属性,在图片的水平对齐,也可以使用text-align,一样的效果。语法:
text-align:属性值;
text-align属性取值 |
属性值 | 说明 |
left | 左对齐,默认值 |
center | 居中对齐 |
right | 右对齐 |
示例代码:
图片水平对齐 div { width:600px; height:100px; border: 1px solid black; margin-bottom:20px; } img { width:80px;height:50px;} #d1 { text-align:right;} #d2 { text-align:center;} #d3 { text-align:left;}
以上代码就是图片的水平对齐方式,很多初学者会有疑问,认为定义图片的水平对齐,肯定是针对img标签来设置的,其实呢,是需要对图片所在的父元素进行水平对齐的。图片垂直对齐:如果我想要图片能够垂直对齐,应该怎么做呢?在css中,我们可以使用vertical-align属性来定义垂直对齐方式的。语法:
vertical-align:属性值;
vertical-align属性取值 |
属性值 | 说明 |
top | 顶部对齐 |
middle | 中部对齐 |
baseline | 基线对齐 |
bottom | 底部对齐 |
示例代码:
垂直对齐方式 #dv1 { width:600px; height:600px; border:1px solid black; text-align:center; } img { width:80px;height:80px;} #img1 { vertical-align:top;} #img2 { vertical-align:middle;} #img3 { vertical-align:bottom;} #img4 { vertical-align:baseline;}
方式:top
方式:middle
方式:bottom
方式:baseline
预览浏览器效果后,大家有疑问了,不是说图片对齐方式吗?没看到图片垂直对齐改变啊。这个就是误解了vertical-align属性的含义了。它负责定义的是行内元素相对于该元素的垂直对齐方式。也就是上面代码中图片与文字的对齐方式。这个大家自己理解一下,消化一下。