Home > Article > Web Front-end > The solution to the problem that the width cannot be set to 100% when setting the display:block attribute of the img tag

The solution to the problem that the width cannot be set to 100% when setting the display:block attribute of the img tag

不言Original: 2018-08-15 13:55:484492browse

What this article talks about is the solution to the problem that the width cannot be set to 100% when setting the display:block attribute of the img tag. The method is very detailed and has certain reference value. Friends in need can refer to it. I hope it can be used. It will help you.

Phenomena

The following code, the img tag is set to display: block, the size width cannot be set to 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>

Reason

Replace elements and non- Replace element

The element is the basis of the document structure. In CSS, each element generates a box (box, also translated as "box") that contains the content of the element. But different elements will be displayed differently, for example, p is different from span, and strong is different from p. Different types are specified for different elements in the document type definition (DTD), which is one of the reasons why DTD is important to documents. According to the characteristics of the element itself, it can be divided into replaced elements (replaced element) and non-replacement elements, non-replacement elements are not clearly defined in the W3C, but we can have replacement elements corresponding to non-replacement elements, so it can be understood that except for replacement elements, the others are non-replacement elements

Replace element: The browser determines the specific display content of the element based on the element's tag and attributes. Replacement elements are elements whose content is not controlled by the CSS visual formatting model, such as img tags, embedded documents (iframes, etc.) or applets. These are called replacement elements. For example, the img element reads image information and displays it through the value of the src attribute. However, if you view the (x)html code, you cannot see the actual content of the image, and the content of the img element is usually replaced by the image specified by the src attribute. ; For example, the type attribute of the input element determines whether to display an input box, a radio button, etc. (x) img, input, textarea, select, object in html are all replacement elements. These elements have no actual content, that is, they are empty elements

Non-replacement elements: (X) Most elements of HTML are non-replacement elements. They directly tell the browser the content and display it

The img tag is a replacement element. One of the characteristics of the replacement element is that the size is determined by the internal element, regardless of whether its display attribute value is inline or block. This feature is very interesting. For non-replaced elements, if its display attribute value is block, it will have fluidity. The width is determined by the external size, but the width of the replaced element is not affected by the display level. Therefore, the display level cannot change the size. The

solution to 100% adaptive parent container

The solution is to set the width size of to 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>

Related recommendations:

Still unable to set the width after using {display:block}? _html/css_WEB-ITnose

display:table, display:block usage difference

css hover: display:block; pseudo-class Applications in drop-down menus need to pay attention to the use of z-index_html/css_WEB-ITnose

The above is the detailed content of The solution to the problem that the width cannot be set to 100% when setting the display:block attribute of the img tag. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use pure CSS to achieve an animation effect without DOM elementsNext article：How to use pure CSS to achieve an animation effect without DOM elements

See more

The solution to the problem that the width cannot be set to 100% when setting the display:block attribute of the img tag

Phenomena

Reason

Replace elements and non- Replace element

solution to 100% adaptive parent container

Related articles