센터의 이미지는 수평 및 수직 % 마진 페이지와 창

Question

그것은 단지 일 전 너무 간단 보였다

와 크기를 조정할 수 있지만 나는 그것을 알아낼 수 없습니다 고정 비율 % 마진 (모든면에서 10 %)을주고 여전히 크기를 창에 맞게 크기를 조정합니까?

스크롤러 (!)가없는 모든 플랫폼에서 페이지와 이미지가 잘 표시되는 것이 매우 중요합니다. 페이지 자체는 매우 간단하며 다른 버전의 페이지에서는 크기가 다른 이미지 만 포함하고 상단에는 바를 링크하여 다른 페이지로 보낼 수 있습니다.

이미지의 최대 크기는 최소 크기가 아닌 1500x1000px입니다.

나는 진심으로 누군가가 나를 도울 수 있기를 바랍니다. 감사합니다.

Answer 1

가장 좋은 방법은 JavaScript를 사용하는 것입니다. 창 크기를 가져오고 window.onresize 이벤트를 구독하고 그에 따라 이미지 크기와 위치를 업데이트하십시오.

모든 위치 속성이 컨테이너에 의존하기 때문에 CSS 만 사용하면 작동하지 않습니다. 귀하의 경우 컨테이너는 내용을 기준으로 크기가 조정되는 창입니다. 이것은 일종의 순환 종속성을 생성합니다 (창 크기는 이미지에 따라 다르며 이미지 크기와 위치는 창 크기에 따라 다릅니다).

크로스 브라우저 방식으로 사용 가능한 정확한 창 크기를 얻는 방법에 대한 자세한 내용은이 게시물을 확인하십시오. Get the size of the screen, current web page and browser window - 잠시 후에 정확한 코드를 제공하지 않았습니다.

또한 이미지의 가로 세로 비율을 유지한다고 언급하지 않습니다. 그것이 유지되지 않아야한다면 HTML/CSS만으로 모든 작업이 이미지의 AR을 유지하기 때문에 HTML/CSS 만 할 방법이 없습니다.