Solution for the width cannot be set to 100% when the IMG tag is set Display:block property

The content of this article is that the IMG tag set Display:block attribute width cannot be set to 100% solution, the method is very detailed, there is a certain reference value, the need for friends can refer to, hope can help you.

Phenomenon

The following code, IMG tag set display:block, size width cannot be set to 100%

<! DOCTYPE html>
Reason

Replacing elements and non-replacement elements

Elements are the basis of a document's structure, and in CSS, each element generates a box containing the contents of the Element (box, also translated as "box"). However, different elements are displayed differently, such as p and span, and strong and p are not the same. Different types are prescribed for different elements in a document type definition (DTD), which is one of the reasons why a DTD is important to a document. And according to the characteristics of the element itself can be divided into replacement elements (replaced element) and non-replacement elements, non-replacement elements, in the paper does not give a clear definition, but we can be replaced by the replacement element corresponding to non-replacement elements, so it can be understood that in addition to replace the element, the other is non-replacement element

Replace element: The browser determines the specific display of an element based on the tag and attributes of the element. The replacement element is an element whose content is not controlled by the CSS visual formatting model, such as an IMG tag, an embedded document (such as an IFRAME), or an applet, which is called a replacement element. For example, the IMG element reads the image information and displays it through the value of the SRC attribute, and if the (x) HTML code is viewed, but the actual content of the image is not visible, and the content of the IMG element is usually replaced by the image specified by the SRC attribute, for example, the Type property of the input element determines that the input box is displayed Or a radio button, and so on. (x) img in HTML, input, textarea, select, object are replacement elements. These elements have no actual content, which is an empty element

Non-replacement elements: (X) Most of the elements of HTML are non-replacement elements, they tell the browser directly to display the content

The IMG tag is a replacement element, and one of the attributes of the replacement element is that the dimension is determined by the inner element, regardless of whether the display property value is inline or block. This feature is interesting, for non-replacement elements, if the display property value is block, it will have liquidity, the width is determined by the external dimensions, but the width of the replacement element is not affected by the display level, so the display level is unable to make the size 100% adaptive parent Container

Solve

The solution is to set the width size of the  by 100%

<! DOCTYPE html>