속성 또는 CSS로 이미지 너비 / 높이? [복제]
이 질문에 이미 답변이 있습니다.
이미지 높이와 너비를 지정하는 "올바른"의미 론적 방법은 무엇입니까? CSS에서 ...
width:15px;
또는 인라인 ...
<img width="15"
?
CSS는 시각적 정보를 입력하기에 적합한 장소 인 것 같습니다. 반면에 이미지 "src"를 속성으로 지정해서는 안되며 높이 / 너비가 "src"처럼 이진 이미지 데이터에 묶여있는 것처럼 보인다고 주장하는 사람은 거의 없습니다.
(예, 기술적 인 최종 사용자의 관점에서 볼 때 이것이 실제로 중요하지 않다는 것을 알고 있습니다.)
인라인으로 정의되어야합니다. img 태그를 사용하는 경우 해당 이미지에는 콘텐츠에 대한 의미 론적 값이 있어야하므로 유효성 검사에 alt 속성이 필요합니다.
이미지가 레이아웃 또는 템플릿의 일부인 경우 img 태그 이외의 태그를 사용하고 이미지를 요소에 CSS 배경으로 할당해야합니다. 이 경우 이미지에는 의미 론적 의미가 없으므로 alt 속성이 필요하지 않습니다. 대부분의 스크린 리더는 CSS 이미지가 존재한다는 사실조차 모를 것이라고 확신합니다.
속성을 사용하는 방법에 따라 다릅니다. 목록이나 표 내에서 여러 이미지의 스타일을 지정 하여 올바르게 배치되는 경우 CSS 에 너비 / 높이를 입력하여 목록의 모든 이미지에 다른 태그 집합을 추가 할 필요가 없도록합니다. 다음과 같은 것을 사용하십시오.
ul.gallery img: { width:117px; }
반면 에 일부 콘텐츠에 이미지를 삽입 하고 문서 흐름을 제대로 만들기 위해 특정 크기가 필요한 경우 HTML에 넣습니다 . 이렇게하면 html에서 각기 다른 이미지에 대한 스타일 시트를 엉망으로 만들 필요가 없습니다. 이렇게하면 콘텐츠를 다른 이미지로 변경하고 이미지를 모두 제거하면 삭제해야 할 코드가 CSS에 흩어져 있지 않습니다.
HTML에 높이와 너비가 포함되어야합니다. 그 이유는 페이지에 간격이 생기기 때문입니다. 어떤 이유로 든 img가로드되지 않으면 (그리고 당신은 좋은 소년이었고 alt .. 브라우저는 그 프레임 (제공된 w 및 h 사용)을 alt 내부에 표시합니다.
주된 유익한 이유는 "팝"효과를 방지하는 것입니다. 브라우저가 페이지를로드 할 때 img와 같은 더 큰 부분은로드하는 데 시간이 더 오래 걸리며 HTML에서 w와 h를 지정하지 않은 경우 브라우저는 해당 영역이 없다고 생각하고 일시적으로 해당 영역을 축소합니다. 그런 다음 마침내로드되면 모든 것이 적절한 위치에 나타납니다.
이것은 특히 성가 시지만 컴퓨터에서는 여전히 꽤 성가신 데, 링크를 클릭 할 것이고 갑자기 페이지가 아래로 이동하고 실수로 잘못된 링크를 클릭했기 때문입니다.
CSS라고 말하고 싶습니다.
HTML은 콘텐츠에 관한
것이고 CSS는 프레젠테이션에 관한 것입니다.
HTML5 사양을 살펴보면 높이와 너비를 지정하는 것은 필수 사항이 아닙니다. 따라서 코드는 이러한 속성의 유무에 관계없이 유효합니다.
실용적인 관점에서 위에서 언급 한 것처럼 페이지 리플 로우를 방지하기 위해이를 지정하는 것이 매우 바람직합니다. 그러나 브라우저가 처음에 페이지를 빌드 할 때 CSS를 사용한다는 사실이 없기 때문에 html에 있어야한다고 제안하는 사람들이 있습니다. 그렇지 않은 경우 플로팅 요소, 지정된 패딩, 여백 등에 대해 페이지를 다시 그려야합니다.
html 또는 css로 지정할지 여부는 개별 상황에 따라 가장 잘 판단됩니다. 동일한 크기의 많은 수의 이미지는 html이있는 단일 이미지 인 css로 제공하는 것이 가장 좋습니다. 즉, 이미지에 다른 스타일 (테두리 색상, 스타일 또는 반경, 부동 등)을 지정하는 경우 CSS에 너비와 높이를 추가하는 것이 합리적입니다.
html로 지정하면 픽셀 만 사용할 수 있습니다. 백분율로 지정하려면 CSS를 사용해야합니다.
참고로, 사용자가 브라우저 설정 등을 변경할 때 문제를 방지하기 위해 px보다는 ems 및 %를 사용하는 것이 좋지만 이미지는 항상 픽셀로 참조됩니다. 분명히 이미지에 px를 사용하는 실질적인 이유가 있습니다. 그러나 이미지를 px로 유지하면 이미지를 사용하지 않는다는 주장이 무효화되는 것 같습니다.
나는 HTML이라고 말하고 싶습니다.
너비 및 높이 속성은 페이지가 연결되지 않은 방식으로로드되고 커지는 것을 중지하는 데 사용됩니다.
위의 늦은 로딩 이미지 덕분에 페이지의 텍스트 블록을 아래로 밀기 위해 읽어 본 적이 있다면 얼마나 실망 스러운지 알 것입니다!
너비와 높이를 지정하기 위해 모든 이미지에 ID를 추가하는 것은 어쨌든 두 개의 너비 / 높이 속성을 추가하는 것만 큼 우스꽝스럽고 거의 지저분합니다.
문제는 Firefox가 너비 및 높이 속성을 사용하여 이미지 공간을 예약하지 않는 것입니다.하지만 실제로 업데이트하지 않은 것에 놀랐습니다.
MDN 의 <img> 기사에 따르면 HTML 속성은 이미지 의 본질적인 크기, 즉 실제 크기를 나타냅니다 . 그렇기 때문에 HTML 4는 백분율 값도 허용했지만 HTML5는 px 값만 허용합니다. (일반적인 함정 : "px"를 쓰면 안 됨)
이러한 치수로 이미지를 표시하려면 작업이 완료되었습니다. 그렇지 않으면 표시 크기 를 지정하기 위해 CSS도 추가해야합니다 .
물론 브라우저 크기 조정을 피하고 대역폭을 절약하기 위해 표시된 크기로 이미지를 제공하는 것이 더 좋지만 항상 가능한 것은 아닙니다.
See also the answers to this question: What's the difference between HTML's and CSS's width attribute?
If it's part of your site template, I'd place it in the CSS file.
If it's just on one page, it should be inline (or defined in a block of page-specific CSS at the top).
My take is that it is part of the content,as you mentioned, much as the src attribute is too.
On the other hand there's no real need to specify width or height in either html or css, though it might help your page render faster.
I would go wi(d)th W3C Recommendation.
That is, defining the width and height as an attribute like this:<img src="example.png" width="150" height="150" alt="example image">
http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
I could be wrong, and if I am, please, someone correct me... but I think Google and some other search engines index the content of alt tags.
Sometimes, for design aesthetics, I have created an image of text created with fonts that are not available via HTML, but are available to Photoshop, Illustrator, etc. If you have a precise typographic impression you want to create which involves textual information, the only way to get that across is to create an image of the typographical text and put the actual text in an alt tag for the sake of search engines.
If someone has a better solution, I'd love to hear it.
Meanwhile, tho, given a need for what I have described, it would seem reasonable to me to vote for HTML inline height/width parameters, along with alt text descriptions, as a matter of standard practice. It is, in fact content, not just design in such cases -- and such cases really should not be exceptions to the rule until CSS and search engines come up with an better solution.
How do email clients deal with img constraints as attributes vs inline styles?
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" >
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" >
<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; " >
<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; height: 50px;" >
So, img size constraints should not be set with inline styles, primarily because Outlook 2007/2010/2013 does not honor them.
What happens when both attributes and inline styles are in use? Some clients use one or the other, and some use the inline width in combination with the attribute height:
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" style="width: 120px; height: 50px;" >
tldr: Use img attributes for html email.
참고URL : https://stackoverflow.com/questions/640190/image-width-height-as-an-attribute-or-in-css
'program story' 카테고리의 다른 글
| 엘릭서가 할 수 있지만 얼랭이 할 수없는 일이 있나요? (0) | 2020.08.27 |
|---|---|
| git : 헤드를 분리하지 않고 분기 전환 (0) | 2020.08.27 |
| OSGi, Java 모듈성 및 Jigsaw (0) | 2020.08.27 |
| Xcode에서 전 처리기 기호를 정의하는 방법 (0) | 2020.08.26 |
| Google 크롬 확장 파일을 직접 수정하려면 어떻게합니까? (0) | 2020.08.26 |