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

小编给大家分享一下img标签设置display:block属性时宽度无法设定为100%怎么办，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

站在用户的角度思考问题，与客户深入沟通，找到广南网站设计与广南网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计、成都网站设计、企业官网、英文网站、手机端网站、网站推广、申请域名、雅安服务器托管、企业邮箱。业务覆盖广南地区。

现象

如下代码，img标签设置了display：block，尺寸宽度无法设定为100%

原因

替换元素和非替换元素

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

非替换元素：(X)HTML 的大多数元素是非替换元素，他们将内容直接告诉浏览器，将其显示出来

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

解决

解决办法就是，通过设定的width尺寸 100%

看完了这篇文章，相信你对img标签设置display:block属性时宽度无法设定为100%怎么办有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！