img标签设置display:block属性时宽度无法设定为100%的处理方法
发表时间：2025-10-29 来源：浏览器大全整理相关软件相关文章人气：
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章所说的内容是img标签设置display:block属性时宽度无法设定为100%的解决办法，方法很详细，有一定的参考价值，有需要的朋友可以参考一下，希望可以对你有所帮助。
现象
如下代码，img标签设置了display：block，尺寸宽度无法设定为100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img标签设置display:block，宽度无法100%</title>
</head>
<body>
<p>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" style="display: block;">
</p>
</body>
</html>原因
替换元素和非替换元素
元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box,也翻译为“盒子”）。但是不同的元素显示的方式会有所不同，例如p和span不同，而strong和p也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。而根据元素本身的特点可以分为替换元素（replaced
element）和非替换元素，非替换元素，在W3C中没有给出明确的定义，但我们可以由替换元素对应着非替换元素，所以可以理解为除了替换元素，其它的就是非替换元素
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。替换元素是其内容不受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%自适应父容器的
解决
解决办法就是，通过设定<img>的width尺寸 100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img标签设置display:block，宽度无法100%</title>
</head>
<body>
<p>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" style="display: block;width: 100%;">
</p>
</body>
</html>相关推荐：
<span>使用{display:block}之后仍然无法设置宽度？_html/css_WEB-ITnose
display:table，display:block用法区别
css hover: display:block;伪类在下拉菜单中的应用需要注意z-index的使用_html/css_WEB-ITnose
以上就是img标签设置display:block属性时宽度无法设定为100%的解决办法的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
