반응 형 이미지를 만드는 가장 쉬운 방법은 무엇입니까?

Question

첫 반응 형 웹 사이트에서 작업 중이며 모든 이미지를 동적으로 크기를 조정하는 방법을 알고 싶습니다. 나는 지금 당장이 문제를 해결해 봤지만, 어떻게했는지 다시 생각해보고 싶습니다. 구현하기가 쉬운 jquery 플러그인이 있습니까 (나는 js을 많이 알지 못합니다)? 더 좋은 방법이 있습니까?

My site

Answer 1

실제로 이것에 대한 어떤 JS 필요하지 않습니다 -이 혼자 CSS 달성 할 수있다. 주석의 링크에서 소스를 보았을 때 동적으로 이미지의 크기를 조정하는 데 필요한 것은 max-width 속성이 100%으로 설정된 것입니다. 그러나 이미지 크기를 동적으로 늘리려면 width:100%을 사용해야합니다.

예 : jsFiddle을 참조하십시오. max-width은 이미지의 해상도를 지나치지 않습니다 - 다른 한편으로는 width은 이미지가 컨테이너를 채우는 것을 보장합니다 (일부는 너비가 원본을 초과 ​​할 때 해상도가 손실되기 때문에 단점으로 보입니다).

캐치가 있지만 IE6 이하에서는 max-width 속성이 지원되지 않습니다. IE7에서만 소개되었습니다. 이 기사에서는 here이 해결책을 제시합니다.

Answer 2

그러나 CSS를 통해 이미지 크기를 조정해도 이미지가 반응하지 않습니다.

200kb 이미지는 1000px 너비 일 때 200kb 이미지가 될 것이지만 css에서 50px 너비로 크기가 조정될 때도 200kb 이미지가됩니다. 나는 큰 이미지는 스마트 폰 여기