img标签设置显示:块属性时宽度无法设定为100%怎么办

原因

替换元素和非替换元素

元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(盒子,也翻译为“盒子”)。但是不同的元素显示的方式会有所不同,例如p和跨度不同,而强和p也不一样。在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一。而根据元素本身的特点可以分为替换元素(取代 　　 　　元素)和非替换元素,非替换元素,在W3C中没有给出明确的定义,但我们可以由替换元素对应着非替换元素,所以可以理解为除了替换元素,其它的就是非替换元素

替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。替换元素是其内容不受CSS视觉格式化模型控制的元素,例如img标签,嵌入的文档(iframe之类)或者applet,这些叫做替换元素,比如img元素通过src属性的值来读取图片信息并显示出来,而如果查看(x) html代码,却看不到图片的实际内容,而且img元素的内容通常会被src属性指定的图像替换掉,例如输入元素的类型属性决定是显示输入框,还是单选按钮等。(x) html中的img,输入,文本区域,选择、对象都是替换元素。这些元素没有实际的内容,即是个空元素

非替换元素:(x) html的大多数元素是非替换元素,他们将内容直接告诉浏览器,将其显示出来

<强> img标签为替换元素,替换元素的特性之一就是尺寸由内部元素决定,且无论其显示属性值是内联还是块。这个特性很有意思,对于非替换元素,如果其显示属性值为,则会具有流动性,宽度由外部尺寸决定,但是替换元素的宽度却不受显示水平影响,因此,显示水平是无法让尺寸100%自适应父容器的

解决

解决办法就是,通过设定& lt; img>宽的尺寸100%