CSS——<img>标签图片适配居中问题

图片标签为<img>，为单闭合标签，使用时<img src="./im.png" alt="花"/>

必选属性:

• alt    图像的替代文本
• src   规定显示图像的URL

img属于行内替换元素，可以使用height/width/padding/margin均可以使用，效果等效于块元素。如果设定了width但未设置height，那么img的height会根据比例缩放。

 

如何让图片在div中居中显示？

1、对div使用text-align属性将图片水平居中，同时使用padding-top值使其垂直居中。

2、利用图片的margin属性或者div的padding属性计算后居中。

3、将其转化块元素（display:block）然后对其设置margin:0 auto;

 

图片自动适应DIV容器大小：

1.设置div容器的大小，里面img的宽度设置为宽和高100%；

2.img的属性是设置一个宽或者高值时，另一个值就会等比例缩放，如果遇到这样的，也可以使用js来判断图片哪个大，然后根据大的值设置固定值，从而使学习图片适配（这种方式也长用在延时加载图片场景，通过js监测窗口的大小来判断加载不同分配率的图片，对于移动设备下载的图片会小一些）。