img 태그의 display:block 속성 설정 시 너비를 100%로 설정할 수 없는 문제에 대한 해결 방법
- 不言원래의
- 2018-08-15 13:55:484441검색
이 글의 내용은 img 태그의 display:block 속성을 설정할 때 너비를 100%로 설정할 수 없는 문제에 대한 해결 방법입니다. 방법이 매우 상세하고 필요한 친구들이 참고할 수 있습니다. 도움이 되었으면 좋겠습니다.
현상
다음 코드는 img 태그가 디스플레이: 블록으로 설정되어 있으며 크기 너비를 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
교체된 요소와 대체되지 않은 요소
요소는 문서의 기본입니다. CSS의 구조에서 각 요소는 요소의 콘텐츠가 포함된 상자(상자, "상자"라고도 번역됨)를 생성합니다. 그러나 서로 다른 요소는 다르게 표시됩니다. 예를 들어 p는 범위와 다르고 Strong은 p와 다릅니다. 문서 유형 정의(DTD)의 다양한 요소에 대해 다양한 유형이 지정되는데, 이는 DTD가 문서에 중요한 이유 중 하나입니다. 요소 자체의 특성에 따라 대체 요소(교체 요소)로 나눌 수 있습니다. 요소) 및 비대체 요소, 비대체 요소는 W3C에서 명확하게 정의되어 있지 않지만, 비대체 요소에 해당하는 대체 요소를 가질 수 있으므로 대체 요소를 제외한 다른 요소는 비대체 요소로 이해할 수 있다. elements
요소 교체: 브라우저는 태그와 속성을 기반으로 요소의 특정 표시 콘텐츠를 결정합니다. 대체 요소는 img 태그, 포함된 문서(iframe 등) 또는 애플릿과 같이 CSS 시각적 형식 지정 모델에 의해 콘텐츠가 제어되지 않는 요소입니다. 예를 들어 img 요소는 이미지 정보를 읽어 src 속성의 값을 통해 표시하지만, (x)html 코드를 보면 이미지의 실제 내용을 볼 수 없으며, img 요소의 내용은 다음과 같습니다. 일반적으로 src 속성으로 지정된 이미지로 대체됩니다. 예를 들어 input 요소의 type 속성은 입력 상자, 라디오 버튼 등을 표시할지 여부를 결정합니다. (x) img, input, textarea, select, html의 object는 모두 대체 요소입니다. 이러한 요소에는 실제 콘텐츠가 없습니다. 즉, 빈 요소입니다.
비대체 요소: (X) HTML의 대부분 요소는 브라우저에 콘텐츠를 직접 알려주고
img 태그를 표시합니다. 대체 요소인 경우, 대체 요소의 특징 중 하나는 표시 속성 값이 인라인인지 블록인지에 관계없이 내부 요소에 의해 크기가 결정된다는 것입니다. 이 기능은 매우 흥미롭습니다. 교체되지 않은 요소의 경우 표시 속성 값이 블록이면 유동성이 있지만 교체된 요소의 너비는 표시 수준에 영향을 받지 않습니다. , 디스플레이 수준은 크기를 변경할 수 없습니다. 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>
로 설정하는 것입니다. 관련 권장 사항:
css hover:display:block; z-index_html/css_WEB-ITnose 위 내용은 img 태그의 display:block 속성 설정 시 너비를 100%로 설정할 수 없는 문제에 대한 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
display:table, display:block 사용법 차이