사이즈 img 요소의 HTML 너비/높이 특성과 CSS 너비/높이 속성의 차이점은 무엇입니까?



vh 계산 (6)

주제에 대한 뜨거운 논쟁은 다음에서 찾을 수 있습니다 : 이미지 태그의 Width 속성 대 CSS

그것을 요 ​​약하기:

width 값과 height 값 (이미지의 원래 물리적 크기가 아닐 수도 있음) 또는 css 선언 (width : [valueX]; height : [valueY]와 같은)을 선언하면 얻을 수있는 이득은 페이지 렌더링. 브라우저는 페이지의 특정 영역을 할당 할 공간의 양을 알고 있습니다. 첫 번째 파싱 + 페이지 렌더링에 이미지 자리 표시자를 그릴 것입니다. 너비와 높이를 정의하지 않으면 브라우저는 이미지를 다운로드 한 다음 크기, 공간을 할당 한 다음 페이지를 다시 그려야합니다.

이것은 내 의견으로는 가장 유익한 효과 인 것으로 보인다.

HTML <img> 요소는 width / height 특성을 가질 수 있으며 CSS 너비 / 높이 특성을 가질 수도 있습니다.

<img src="xxx.img" width="16" height="16" 
style="width: 16px; height: 16px"></img>

HTML 속성과 CSS 속성의 차이점은 무엇이며 동일한 영향을 주어야합니까?


Answer #1

http://www.w3schools.com/tags/tag_IMG.asp

  • 이 목적을 위해 잠시 동안 이미지 태그를 사용하지 않았습니다. 그러나 차이점이 있습니다. 속성은 이미지 크기에 상대적 일 수 있습니다. CSS 스타일 속성은 절대적입니다 (%, px, em ...).

Answer #2

그들도 같은 효과가 있습니다.

<img width="100" height="100" /> 은 HTML 테이블의 widht / height 속성과 마찬가지로 오랫동안 사용되었습니다.

HTML을 명확하고 간결하게 유지할 수 있도록 CSS를 사용하는 편이 좋지만 요소 자체 나 CSS 내에서 지정하는지 여부에는 차이가 없습니다.

다음은 http://jsfiddle.net/N2RgB/1/ 의 예입니다.

HTML 속성 CSS 속성을 사용하여 비례 및 비례의 같은 이미지를 네 번로드했습니다.

전혀 차이가 없습니다.


Answer #3

나는 다음과 비교를했다 : http://jsfiddle.net/jF8y6/ 4 개의 다른 주와. 가장 큰 차이점은 다른 스타일 시트 (데스크탑, 모바일, 인쇄 등)에 대한 이미지 크기 조정 기능과 유연성을 제공하는 측면에서 외부 스타일 시트를 통해 사용되는 방식입니다. 크기를 하드 코딩하면 유연성이 사라집니다.


Answer #4

너는 이것을 시도 할 수있다.

<img src="some_pic.jpg" width="100" />

높이가 자동 크기가됩니다.

<img src="some_pic.jpg" style="width:100px" />

높이는 자동 크기가 아닙니다.

더 많은 것을 시도해보십시오. 차이점을 알면됩니다.


Answer #5

차이점은 렌더링이 작동하는 방식보다는 의미 론적 및 일반적인 방식에 있습니다. :) 나는 개인적으로 CSS 클래스 내에서 너비와 높이와 같은 모든 것을 집중하고 "width ="width = "width : 100px '"와 같은 인라인 스타일과 "width"같은 속성을 사용하는 것을 피합니다. HTML 마크 업은 표시 할 내용과 CSS 규칙을 표시합니다. 정확하게 표시됩니다.





image