사진을 업로드 할 수있는 웹 애플리케이션을 개발 중입니다. 다양한 크기의 미리보기 이미지를 만듭니다. 크기 중 하나가 240, 240이라고합시다.이미지 태그에 height 태그와 weight 속성을 100 % 맞지 않아도 되겠습니까?
이미지를 렌더링 할 때이 축소판에 "높이"및 "너비"특성을 넣으려는 것이 좋습니다. 그러나 사용자가 업로드 한 이미지는 실제로 키가 크고 마른 체형 일 수 있습니다. 이 경우 폭은 "240"이되지 않습니다.
이 경우에 권장되는 높이 및 너비 속성은 무엇입니까? 또는 미리보기 이미지의 높이 및 두께 속성에 대해 걱정할 필요가 없습니다.
아니요, img 요소에 width 및 height을 잘못 입력하지 마십시오. 그러나 당신이 섬네일을 만들 때 은이 올바른 크기의 이미지를 출력해야합니까? 예를 들어, 대신 500 X 200-240 X 96에서 이미지를 다운 스케일링, 240 X 240 인 새로운 투명 이미지를 생성하고, 투명 화상의 중간 스케일링 화상 (X 96240)를 배치했다. 그런 다음 img에 width 및 height을 지정하고 이미지를 잘못 늘리지 않도록 지정할 수 있습니다.
height 및 width 속성은 렌더링 캔버스에서 이미지에 사용할 공간의 크기를 브라우저에 알려줍니다.
실제 이미지의 크기가 맞지 않으면 크기가 조정됩니다. 같은 종횡비가 아닌 경우 이미지가 확대되거나 축소되어 압축됩니다.
실제 크기를 지정해야합니다.
가장 큰 치수가 240이되도록 축소 그림의 크기를 조정하는 것이 적절할 수 있습니다. 이미지가 정사각형이 아닌 경우 다른 치수는 같은 비율로 조정해야합니다. 예를 들어 사용자가 480x100 이미지를 업로드하는 경우 가로 세로 비율을 유지하면서 이미지를 240x50 크기로 조정합니다.
속성은 실제로 필요하지 않습니다, 그래서 당신이 그들을 모르는 경우에 넣어하지 않습니다.
가 실제로 이미지가 왜곡되어 나타납니다 하시겠습니까? 그렇지 않으면 나중에 어쨌든 높이와 너비를 변경하게되므로 더미 값을 가진 속성이 실제로 유용한 용도로 사용되지는 않습니다. 기억할 수 있듯이 성능상의 이유로 권장되므로 브라우저는 일단 이미지 크기를 알게되면 나중에 이미지 크기를 설정할 필요가 없습니다.
치수 중 하나가 고정되어 있다고 확신 할 수 있다면 치수를 설정해야합니다.
균일하지 않은 콘텐츠가 포함 된 균일 한 격자를 만드는 경우 포함 DIV/테이블 셀/너의 높이와 너비를 설정할 수 있습니다.
'img' 요소의'width'와'height'를 설정하는 것이 좋습니다. 설정하지 않으면 이미지가로드 될 때 페이지가 리플 로우합니다 (다른 요소가 이동합니다) 다른 아이들은 없으며 크기가 정해져 있음). 성능상의 이유로뿐만 아니라 최종 사용자 *는 이미지 크기가 구체적으로 설정되었을 때 향상됩니다. – 0b10011