이미지 크기 조정이 예상대로 작동하지 않습니까?

scale 변환을 사용하여 이미지 크기를 줄입니다. 그게 원래의 이미지 크기가 페이지 크기를 계산하는 데 사용된다는 점을 제외하고는 정상적으로 작동합니다. 따라서 거대한 빈 페이지에서 가로/세로 스크롤을 얻을 수 있습니다. 나는 이것이 어떻게 작동하는지에 대해 약간 혼란 스럽다. 스케일이 이미지를 축소/확대하기로되어 있지 않은가?이미지 크기 조정이 예상대로 작동하지 않습니까?

"여분"공간을 어떻게 든 제거 할 수 있습니까? CSS 만 사용하는 솔루션이 필요하지 않습니다. 자바 스크립트를 사용하면 완벽합니다.

바이올린 : http://jsfiddle.net/kcYCm/

편집 아래 게시

@jgv 솔루션은 이미지를 제대로 크기를 않지만, 스케일링으로 문제가 해결되지 않습니다.

우리가이 방법을 사용하려고 시도하고 대신 이미지 크기를 조정하려고하면 우스운 효과를 얻습니다. 이미지의 일부만 확대되고 스크롤바가 다시 표시됩니다. 그래서 이미지가 축소되면 다른 것에 영향을주지 않지만 크기가 커지면 효과가 있습니까? 예상 되나요?

바이올린 : http://jsfiddle.net/kcYCm/6/

출처

2013-07-17 caiocpricci2

http://jsfiddle.net/kcYCm/5/이 이미지의 원하는 최종 크기에 대한 구체적인 치수를해야합니까? 나는 단지 'scale()'CSS 함수를 없애고 엘리먼트에 특정한'width'를 설정하여 올바르게 크기를 재조정 할 것이다. http://jsfiddle.net/kcYCm/3/ –

옵션이 없다. 거대한 이미지, 크기 및 크기를 가져와야하므로 나중에 크기를 조정할 수 있습니다. 그것은 모바일 장치에서 작동하도록되어 있으므로'transforms '이 꽤 붙어 있습니다. – caiocpricci2

시도 사업부에 화상을 배치하고 포장재의 치수를 지정. CSS3는 없지만 작동합니다.

<div style="height: 300px"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/4/4e/Les_Invalides_de_Paris_ceiling_huge.jpg" style="max-height: 100%; max-width: 100%"/> 
</div>

예 :

출처

2013-07-17 14:18:50 jgv

이것은 문제를 해결합니다. 게시하기 전에 거기에 왔지만 저울을 사용한 후에 문제를 해결할 수있는 방법을 찾고있었습니다. 그 해결책을 찾지 못하면이 문제를 해결해야 할 것입니다. 감사! – caiocpricci2

@ caiocpricci2 미래의 "확대/축소"또는 "고급"이벤트의 경우이 주어진 솔루션으로 JavaScript를 손쉽게 사용하여 문제를 해결할 수 있습니다. –

@jgv 질문에 큰 변화를 만들었습니다. 문제가 무엇인지 더 잘 설명합니다. 래퍼를 사용해 다른 시도를 해봤지만 크기를 조정하려고하면 재미가 있습니다. – caiocpricci2

이미지 크기 조정이 예상대로 작동하지 않습니까?

답변

관련 문제