如何用css控制表格中的图片大小

html-css031

如何用css控制表格中的图片大小,第1张

要控制图片的大小,必须得先知道这张图片是以什么形式展现的:

1.<img>导入

2.background-image.

就只有这2种方法,即使是用JS或者其他语言来控制,也是万变不离其宗,这两种方法就是本质。

对于第一种(<img>),控制大小可以通过外框设置宽度,然后img用100%来适应外框(这样子,图片会根据width来自动调整图片,如果长、宽都设死了,那么图片一般都会出现变形),当然纵向也是同理可以执行的。

第二种的话(background-image)可以通过:

background-size来自适应大小。样式有4个属性:

length:

设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

测试

percentage:

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

测试

cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

测试

contain:

把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

简单的办法就是

用你说的身份证来说的 在PS里建一个这样的毫米尺寸的画布

然后ctrl+H 调出刻度尺 在刻度尺上右键 直接转换成PX像素单位

然后你就能得到一个物理的像素单位

然后网页里 就用这个PX(像素)作为单位 输出就行了