css中img默认样式问题

html-css026

css中img默认样式问题,第1张

img默认是个行内元素,比如在img的前面或后面放一些文字,这些文字会与图片排在同一行。因此,当图片的前后存在一些空格或回车换行符时,它们会与图片一起成为同一块行内元素,从而会造成外面的div被撑得比你想象的尺寸要大一些,比如:<div><img src="..."/></div>而如果是这样就不会:<div><img src="..."/></div>如果给img的css添加display:block属性,它就会变成块级元素(它会独占一行),其前后的空格、回车等也会被自动忽略,这样外面的div的尺寸就会保持与img一致。

1、首先在编辑器建立了一个静态页面,在body中添加两个div,设置宽度,并设class 为div1和div2,在两个div的class 中添加相同的控制图片的class名为了 ”img“,并为div添加控制宽度的样式:

2、在两个div中加入相同的图片, 这个时候需要在img 类中加入css语句设置一下div的高度和宽度,以及div的边框,然后就可以设置img的样式了:

3、最后设置img的样式中图片的高度为auto,宽度为100%,这样就可以自适应浏览器了,来到浏览器,可以看到设置了自适应的图片自动填满整个div了,而没有设置的则是填充了一部分。以上就是让div自动适应自身的img高度:

<div>

<img src="图片">

</div>

给图片img宽度100%高度100%

这样你随意改变div大小图片都会随着你改变的大小改变