HTML 동적 자르기

Question

현재 테이블에 이미지를 표시하는 데 문제가 있습니다.

이미지의 가로 세로 비율이 모두 다릅니다. 이미지의 종횡비가 다르기 때문에 이미지 표가 어수선하게 보입니다.

이 문제를 해결하기 위해 자르기가 필요한 부분을 정확하게 정사각형으로 자르고 싶습니다. 난 이미 PHP 스크립트로 축소했다.

까다로운 부분은 HTML, CSS 및 PHP 서버 사이드 만 사용할 수 있다는 것입니다. 다른 모든 것은 지원되지 않습니다.

이미지 자르기의 크기를 모르는 상태에서 동적으로 처리 할 수있는 방법이 있습니까?

Answer 1

width 및 height (원하는 사각형의 크기)의 div가 있고 background-image의 크기가 알 수없는 크기로 설정되어 있습니다. 그러면 이미지가 "잘린"것처럼 보일 것입니다. 즉 div의 크기 밖에있는 모든 것이 보이지 않을 것입니다.

Answer 2

가 HTML5를 사용하여 여러 가지 옵션이 있습니다 :

1. 당신은 이미지 기능을 사용하여 원하는 크기로/아래 이미지를 확장 할 수 있습니다 (당신은 HTML5와이 태그있다 그래서 나는 당신이 그것을 사용할 수 있습니다 가정) :

void drawImage(Object image, float dx, float dy, [Optional] float dw, float dh);

필요한 폭 & 높이를 지정하고 ... 당신은 명백한 유물을 볼 수 확장의 너무 많이가있는 경우 있지만 그것은 적절하게 이미지를 확장 할 수

또는

2 당신은 DX, DY에 의해 정의 된 목적지에 SX, SY, 자상 한 & 쉬 표시로 정의되고있는 이미지의 일부를 슬라이스 할 수있는, 같은 기능의 다른 변형을 사용 & DH

를 DW 수 있습니다

void drawImage(Object image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh)