나는 이것이 가능하지 않다고 확신하지만 믿을 수 없기 때문에 묻습니다.반응이 빠른 이미지 및 미디어 쿼리
나는 reponsive 디자인
img {max-width:100%;height:auto;}
에 대한 스타일 몇 가지 요소를 가지고 있지만 이미지가 (내가 전화 장치에 무거운 와이드 스크린 이미지를로드하지 않습니다) 장치에 따라 다를 수 있습니다.
미디어 쿼리가 인라인으로 지원되지 않기 때문에 CSS 배경 솔루션을 사용할 수는 있지만 배경 크기가 완벽하게 지원되지는 않으며 솔직히 해킹처럼 보입니다.
"광범위하게 지원되는 장치 관련 반응 이미지"가 제대로 가능하지 않다는 것을 누구든지 확인할 수 있습니까?
감사합니다.
질문을 올바르게 이해하면 귀하의 질문에 따라 다른 이미지를 전달할 방법을 찾고 있습니다. 견해.
Adaptive Images은 귀하가 찾고있는 해결책이 될 수 있습니다. 손쉬운 설정 및 확인.
더 많은 제어 권한을 줄 수있는 두 번째 가능성은 Adapt.js입니다. 여러 사이트에서 좋은 성과를 거두었습니다. 문서 머리 부분에 작은 자바 스크립트 파일을로드합니다. 그러면 뷰 포인트 너비를 테스트 한 다음 결과에 종속되어 적절한 CSS 파일을 보냅니다. @media 요청보다 브라우저 지원이 더 넓습니다.
배경 이미지를 사용하여 생활 할 수 있다면 잘 작동 할 것이며 다른 시점에 다른 이미지를 지정할 수 있기 때문에 배경 이미지 크기를 이해하지 못하는 브라우저에서는 크릭이되지 않습니다.
행운을 빈다.
답변 해 주셔서 감사합니다. 적응 형 이미지가 작동하지 않는 것 같습니다 (전체 크기 이미지는 항상 화면 너비에 관계없이로드되지만). Adapt.js는 훌륭한 솔루션처럼 보입니다. 이것이 더 좋아지기 어렵다는 것을 받아 들인 응답으로 표시하십시오. – kursus
당신에게 잘 맞는 것을 발견하게되어 기쁩니다. 반응 형 디자인은 종종 예기치 않은 문제를 던졌습니다. –
나는 아무 것도 확인하지 않았습니다. jquery/javascript에는 아무 것도 없습니다.
그러나 실제로는 반응 형 디자인에는 고유 한 단점이 있습니다. 즉, 응답 형 디자인을 정의하려면 큰 브라우저 해상도의 장치에 모든 것을 표시하고 dsiplay : none을 사용하여 덜 해상도 인 것을 CSS으로 숨기십시오. 문제는 디스플레이 : 아무 것도 요소 로딩을 방지하지 않습니다. 간단히 말해서, 아마도 CSS를 사용하지 않아도됩니다. 반응 형 디자인은 CSS에 관한 것입니다 ..............
Responsive Img jQuery plugin을 사용해보세요.
컨테이너의 너비에 따라 서로 다른 크기의 이미지를 서로 다른 중단 점에서 자동으로 만들고 스왑합니다.
이미지에 이미 다른 버전이 생성되어 서버에있는 경우 플러그인은 올바른 버전의 중단 점 크기로 교체합니다.
따라서 원하는 모든 다른 중단 점 크기에 대해 새 이미지를 만들 수 있으며 나머지는 플러그 인에서 처리합니다.
CSS가 아니지만 작업이 완료됩니다.
2014 업데이트를
여기에 좋은 새로운 기술이있다 : http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
그것은 작은 JS을 필요로하는 1x1px 빈 이미지, img 태그에 대한 몇 가지 추가 마크 업, 일부 htaccess로는 규칙.
지금까지 문제가없는 것으로 보입니다.
위대한기도가 그것을 확인했습니다 : http://css-tricks.com/on-responsive-images/ – kursus