휴대 기기에서 이미지를 게재하는 방법

스마트 폰과 태블릿 모두 모바일 기기 용 웹 페이지를 개발 중입니다.휴대 기기에서 이미지를 게재하는 방법

대부분의 기능이 모든 장치에서 잘 작동하도록 jQueryMobile에서 작업하고 있습니다.

내 문제는 정제를 사용하여 최상의 품질을 얻으려면 고해상도 이미지를 사용하고 싶습니다. 720X1280을 사용하면 페이지가 태블릿에서 멋지게 보이지만 스마트 폰에서는 축소되지 않습니다.

320x480을 사용하여 빌드해야하나요? 그러면 크기가 조정될 것입니다. 어떤 soultion이나 지침이 있습니까?

반응 형 이미지를 사용하십시오. 따라서 이미지는 장치의 크기에 따라 확장됩니다.

img { 
    width: 100%; 
    max-width: 100%; 
}

위의 CSS 코드는 자동으로 상위 컨테이너 크기를 사용합니다.

여기에 몇 가지 훌륭한 예제가 있습니다. & aticles.

적응 이미지

자바 스크립트 플러그인 : 유연한 이미지

큰 튜토리얼 :

2012-06-13 07:28:17 SVS

'width'와'max-width'가 중복되어 있지 않습니까? –

최대폭 필요 없음 이미지를 반응 적으로 만들 때 높이를 '자동'으로 설정하는 것을 잊지 마세요. 특정 브라우저에서 이미지가 표시되지 않습니다. –

유용한 스매싱 잡지 기사 +1 –

답변