이미지 크기를 html로 지정해야합니까?

Question

모든 이미지의 너비와 높이를 하드 코딩하는 것이 가장 좋습니다 (일반적으로로드하는 동안 적절한 양의 공간을 할당 했음). 그러나 이제는 대부분의 사람들이 고속 일 때나 일반적으로 더 동적 인 경우에 가장 좋은 방법은 무엇입니까? 이거? 모든 콘텐츠 이미지에 html로 설정된 인라인 크기가 여전히 선호됩니까?

Answer 1

HTML 속성 또는 스타일 시트를 사용하여 크기를 설정하더라도 상관 없지만 이미지의 크기는 지정해야합니다.

요즘에는 많은 이미지가로드되지만, 표시되는 페이지와 이미지 사이에 눈에 띄는 지연이 있습니다. 이미지가로드되는 동안 페이지의 레이아웃이 변경되면 여전히 자극적입니다.

Answer 2

그래, 그래도 좋습니다.

많은 사람들이 고속 연결을하고 있지 않으며 모바일이 보편화되고 있습니다.

Answer 3

인라인 일 필요는 없습니다. 외부 CSS에서 할 수 있습니다. 오래된 브라우저 중 일부는 크기를 지정하지 않으면 0px로 취급됩니다.

Answer 4

그것의 항상 최고의 CSS를

을 사용하는 당신은 그 자체가 대부분의 경우 당신이로 표시 할 크기해야이

.myimg img { 
width: 10px; 
height: 10px; 
} 

Answer 5

이미지 파일과 같은 이미지의 높이와 너비를 하드 코드 수 , 특히 느린 로딩에 대해 우려한다면! 500X800 픽셀 이미지가 있다면 100X200로 표시하고 크기를 줄일 수 있습니다. 파일 크기가 훨씬 작아서로드가 더 빨라집니다.

Answer 6

이미지가로드되지 않거나 문서가로드되는 경우 공백이 포함되도록하려면 예라고 말합니다. 그러나 브라우저에서 불필요한로드로 인해 이미지 왜곡 현상이 발생하는 등 이미지 속성의 크기를 조정하거나 크기를 조정할 필요가 없습니다.

Answer 7

크로스 브라우저 호환성을 위해 디자인하는 경우 이미지 자체에 CSS의 높이와 너비를 지정해야합니다. 크기가 이미지에 맞게 지정되지 않은 경우 FireFox, IE, Opera 등의 불일치가 발견되었습니다. 다른 브라우저는 물론 각 브라우저가 HTML 표준을 다르게 처리한다는 사실 때문에. 일부 브라우저는 HTML 디자이너의 의도를 추정하기 위해 최선을 다할 것이며, 다른 브라우저는 첫 번째 오류가 발생하는 것으로 나타났습니다. 태블릿과 같은 휴대 기기에서 웹 사이트를 볼 경우 픽셀 또는 % 대신 크기를 사용하는 것이 좋습니다. 그러나 나는 HTML5로 시작 했으므로 이미지와 관련하여 HTML5의 차이점이 없다고 말할 것이다.

Answer 8

저는 Wordpress Stack Exchange와 Webmaster Stack에서 a similar question으로 대답했습니다. 나는 더 많은 사람들을 명확히하고 도우려는 의도로 이곳에 게시하고 있습니다. (관리자/운영자 : 허용되지 않는 경우 적절한 방법을 알려주세요).

실제로는 html에서 너비와 높이를 지정해야한다는 의미는 아닙니다. 그것이 의미하는 바는 적절한 공간을 확보해야한다는 것입니다. 이미지가로드되면 브라우저는 리플 로우하여 페이지를 다시 채워 넣지 않아도됩니다.

외에도 치수를 하드 코딩하면 응답하는 동작을 무효화 할 수 있습니다. 레이아웃이 반응이 없다면 괜찮습니다. 그러나 응답 성을 유지하려면 CSS 만 사용하여 결과를 얻을 수 있습니다.스매싱 매거진에서

일을 할 것입니다 폭과 max-width:100을 모두 사용하여, 대부분의 시간,하지만 this post 흥미로운 기술을 가지고 대신 최대 폭을 사용 : 100 %를, 당신은 패딩 - 하단 해킹 를 사용할 수 있습니다

"기술을 사용하여 폭을 기준으로 높이를 정의합니다. 패딩과 여백은 고유 한 특성을 가지며, 내용을 포함하지 않는 요소의 종횡비를 만들 때 사용할 수 있습니다. 패딩은이 기능을 가지고 있기 때문에 padding-bottom을 요소 너비에 상대적으로 설정할 수 있습니다. 또한 높이를 0으로 설정하면 우리가 원하는 것을 얻을 수 있습니다. [...]

다음 단계는 이미지를 컨테이너 안에 넣고 컨테이너를 채우는 것입니다. 이를 위해, 우리는 컨테이너 내부 절대적으로 이미지를 배치과 같이해야합니다. "

.img-container { 
    padding-bottom: 56.25%; /* 16:9 ratio */ 
    height: 0; 
    background-color: black; 
} 

.img-container img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}