img标签设置display:block，宽度没法100%

时间 2019-12-09

标签 img 标签设置 display block 宽度没法 100% 栏目 HTML 繁體版

原文原文链接

img标签设置display:block，宽度没法100%

一些我的总结，第一次发文章，有什么不足的地方，还请各位多提意见

现象

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签设置display:block，宽度没法100%</title>
</head>
<body>
    <div>
        <img src="https://www.baidu.com/img/bd_logo1.png?where=super" style="display: block;">
    </div>
</body>
</html>

缘由

替换元素和非替换元素

元素是文档结构的基础，在CSS中，每一个元素生成了一个包含了元素内容的框（box,也翻译为“盒子”）。可是不一样的元素显示的方式会有所不一样，例如div和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 的大多数元素是非替换元素，他们将内容直接告诉浏览器，将其显示出来app

img标签为替换元素，替换元素的特性之一就是尺寸由内部元素决定，且不管其 display 属性值是 inline 仍是 block。这个特性颇有意思，对于非替换元素，若是其 display 属性值为 block，则会具备流动性，宽度由外部尺寸决定，可是替换元素的宽度却不受 display 水平影响，所以，display 水平是没法让尺寸 100%自适应父容器的学习

解决

解决办法就是，经过设定<img>的width尺寸 100%spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签设置display:block，宽度没法100%</title>
</head>
<body>
    <div>
        <img src="https://www.baidu.com/img/bd_logo1.png?where=super" style="display: block;width: 100%;">
    </div>
</body>
</html>

小结

刚开始的博客之旅，记录一些本身学习点滴和经验，接下来会不断努力的探索和记录，但愿文章能有助于各位，有什么不足之处，还望你们多多指出翻译