Shulou(Shulou.com)06/01 Report--

Xiaobian to share with you how to solve the img tag set display:block attribute width can not be set to 100% of the problem, I hope you have something to gain after reading this article, let us discuss it together!

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

img tag settings display:block, width cannot be 100%

reason

Substitution and non-substitution elements

Elements are the basis of document structure, and in CSS, each element generates a box that contains the element's contents. However, different elements are displayed differently, for example p and span are different, and strong and p are different. Different types are specified for different elements in the Document Type Definition (DTD), which is one of the reasons why DTDs are important for documents. According to the characteristics of the element itself, it can be divided into replaced elements and non-replaced elements. Non-replaced elements are not clearly defined in W3C, but we can correspond to non-replaced elements by replaced elements, so we can understand that except for replaced elements, other elements are non-replaced elements.

Substitute elements: The browser determines the specific display content of an element based on its tags and attributes. Substitution elements are elements whose content is not controlled by the CSS visual formatting model, such as img tags, embedded documents (iframes and the like), or applets, which are called substitution elements. For example, the img element reads the image information and displays it through the value of the src attribute, but if you look at the (x)html code, you can't 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 the input box or the radio button. (x) img,input,textarea,select,object in html are all substitution elements. These elements have no actual content, i.e. are empty elements

Non-replacement elements: (X) Most elements of HTML are non-replacement elements that tell the browser what they are and display it

The img tag is a replacement element. One of the properties of a replacement element is that its size is determined by the inner element, regardless of whether its display attribute is inline or block. This property is very interesting. For non-replacement elements, if the display attribute value is block, it will have fluidity, and the width is determined by the external size. However, the width of the replacement element is not affected by the display level. Therefore, the display level cannot make the size 100% adaptive to the parent container.

solve

And the solution is, by setting

width size 100%

img tag settings display:block, width cannot be 100%

After reading this article, I believe you have a certain understanding of "how to solve the problem that the width cannot be set to 100% when setting the img tag display:block attribute." If you want to know more about it, please pay attention to the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.