이미지 크기는 img 태그 높이 / 너비 속성 또는 CSS에서 정의해야합니까?

이미지 크기는 img 태그 높이 / 너비 속성 또는 CSS에서 정의해야합니까? [복제]

---

이 질문에 이미 답변이 있습니다.

• HTML에서 IMG의 높이 및 너비 속성을 지정해야합니까? 5 답변

img태그 width및 height속성 에 이미지 크기를 정의하는 것이 더 나은 코딩 관행 입니까?

<img src="images/academia_vs_business.png" width="740" height="382" alt="" />

아니면 너비 / 높이가있는 CSS 스타일에서?

<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" />

아니면 둘다?

<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" />

---

여기서는 그레인에 반대하고 레이아웃에서 콘텐츠를 분리하는 원칙 (CSS 사용을 제안하는 답변을 정당화 할 수 있음)이 이미지 높이와 너비에 항상 적용되는 것은 아니라고 말합니다.

각 이미지에는 이미지 데이터에서 파생 될 수있는 원래의 원래 높이와 너비가 있습니다. 콘텐츠 대 레이아웃의 프레임 워크에서이 파생 된 높이 및 너비 정보는 레이아웃이 아니라 콘텐츠이므로 요소 속성으로 HTML로 렌더링되어야합니다.

이것은 alt이미지에서 파생되었다고 할 수 있는 텍스트 와 매우 유사합니다 . 이는 또한 임의의 사용자 에이전트 (예 : 음성 브라우저)가 사용자와 관련시키기 위해 해당 정보를 가져야한다는 생각을 지원합니다. 적어도 가로 세로 비율은 유용 할 수 있습니다 ( "이미지의 너비는 15이고 높이는 200"). 이러한 사용자 에이전트는 반드시 CSS를 처리하지는 않습니다.

사양에는 width및 height속성을 사용하여 실제 이미지 파일에 전달 된 높이와 너비를 재정의 할 수도 있습니다. 나는 그들이 이것을 위해 사용되는 것을 제안하지 않습니다. 높이와 너비를 재정의하려면 CSS (인라인, 포함 또는 외부)가 가장 좋은 방법이라고 생각합니다.

따라서 수행하려는 작업에 따라 하나 및 / 또는 다른 하나를 지정합니다. 이상적으로는 원래의 높이와 너비는 항상 HTML 요소 속성으로 지정되는 반면 스타일링 정보는 선택적으로 CSS로 전달되어야합니다.

---

태그에서 높이 / 너비를 정의하는 역사적 이유 <img>는 CSS 및 / 또는 이미지 리소스가로드되기 전에 브라우저가 페이지 의 실제 요소 크기를 조정할 수 있기 때문 입니다. 높이와 너비를 명시 적으로 제공하지 않으면 <img>브라우저가 파일을 기반으로 크기를 조정할 수있을 때까지 요소가 0x0으로 렌더링됩니다. 이 경우 이미지가로드되면 페이지의 시각적 리플 로우가 발생하고 페이지에 여러 이미지가있는 경우 합성됩니다. <img>비아 높이 / 너비의 크기를 조정하면 페이지 흐름에 올바른 크기로 물리적 자리 표시자가 만들어져 사용자 경험을 방해하지 않고 콘텐츠를 비동기 적으로로드 할 수 있습니다.

또는 요즘 모범 사례 인 모바일 반응 형 디자인을 수행하는 경우 너비 (또는 최대 너비) 만 지정 하고 높이를 auto. 이렇게하면 다양한 화면 너비에 대한 미디어 쿼리 (예 : CSS)를 정의 할 때 이미지 너비를 조정하고 브라우저가 이미지 높이 / 종횡비를 올바르게 유지하도록 할 수 있습니다. 이것은 약간의 리플 로우를 얻을 수 있기 때문에 일종의 중간 지점 접근 방식이지만 광범위한 화면 크기를 지원할 수 있으므로 일반적으로 이점이 부정적인 것보다 큽니다.

마지막으로 이미지 크기를 미리 알지 못하는 경우 src가 있습니다 (이미지 는 동적으로로드되거나 스크립트를 통해 페이지의 수명 동안 변경 될 수 있음).이 경우 CSS 만 사용하는 것이 합리적입니다.

결론은 트레이드 오프를 이해하고 달성하려는 목표에 가장 적합한 전략을 결정해야한다는 것입니다.

---

인라인 스타일을 사용하는 것은 괜찮지 만 페이지에 외부 CSS 파일을 포함하여 목적에 부합 할 수 있습니다. 이렇게하면 이미지 클래스 (예 : 'Thumbnail', 'Photo', 'Large'등)를 정의하고 일정한 크기를 할당 할 수 있습니다. 이렇게하면 여러 페이지에 걸쳐 동일한 배치가 필요한 이미지가 나올 때 도움이됩니다.

이렇게 :

헤더에서 :
<link type = "text / css"rel = "stylesheet"href = "css / style.css"/>

귀하의 HTML :
<img class = "thumbnail"src = "images / academia_vs_business.png"alt = ""/>

css / style.css에서 :
img.thumbnail {
   너비 : 75px;
   높이 : 75px;
}

하지만 인라인 스타일을 사용하고 싶다면 가독성을 위해 스타일 속성을 사용하여 너비와 높이를 설정하는 것이 가장 좋습니다.

---

<img id="uxcMyImageId" src"myImage" width="100" height="100" />

이미지 태그에 너비와 높이를 지정하는 것이 좋습니다. 이렇게하면 페이지가로드 될 때 이미지에 할당 된 공간이 있고 이미지를로드하는 데 오랜 시간이 걸리더라도 레이아웃이 갑작스럽게 발생하지 않습니다.

---

확실히 둘 다 아닙니다. 그 외에는 개인적 취향이라고 말해야 할 것 같습니다. 코드를 줄이기 위해 동일한 크기의 이미지가 많은 경우 CSS를 사용합니다.

.my_images img {width: 20px; height:20px}

장기적으로 CSS는 HTML 속성 사용이 중단되고 SVG와 같은 벡터 이미지 형식의 성장으로 인해 성공할 수 있습니다. SVG와 같은 벡터 이미지 형식의 성장으로 인해 실제로 % 또는 em과 같은 비 픽셀 기반 단위를 사용하여 이미지 크기를 조정할 수 있습니다.

---

옵션 A. 단순한 직선. 당신이 보는 것은 당신이 쉽게 계산할 수있는 것입니다.

Option b. Too messy to do this inline unless you want to have a site that can stretch. IE if you used the with:86em however modern browsers seem to handle this functionally adequately for my purposes.. . Personally the only time that i would use something like this is if i were to create a thumbnails catalogue.

/*css*/
ul.myThumbs{}
ul.myThumbs li {float:left; width:50px;}
ul.myThumbs li img{width:50px; height:50px;border:0;}

<!--html-->
<ul><li>
<img src="~/img/products/thumbs/productid.jpg" alt="" />
</li></ul>

Option c. Too messy to maintain.

---

I'm using contentEditable to allow rich text editing in my app. I don't know how it slips through, but when an image is inserted, and then resized (by dragging the anchors on its side), it generates something like this:

  <img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/>

(subsequent testing shown that inserted images did not contain this "rogue" style attr+param).

When rendered by the browser (IE7), the width and height in the style overrides the img width/height param (so the image is shown like how I wanted it.. resized to 55px x 55px. So everything went well so it seems.

When I output the page to a ms-word document via setting the mime type application/msword or pasting the browser rendering to msword document, all the images reverted back to its default size. I finally found out that msword is discarding the style and using the img width and height tag (which has the value of the original image size).

Took me a while to found this out. Anyway... I've coded a javascript function to traverse all tags and "transferring" the img style.width and style.height values into the img.width and img.height, then clearing both the values in style, before I proceed saving this piece of html/richtext data into the database.

cheers.

opps.. my answer is.. no. leave both attributes directly under img, rather than style.

참고URL : https://stackoverflow.com/questions/2414506/should-image-size-be-defined-in-the-img-tag-height-width-attributes-or-in-css