부트 스트랩에서 이미지를 서로 다른 화면으로 바꾸기

Question

일반 화면과 ipad에 대해 하나의 큰 이미지를 표시 한 다음 작은 화면으로 떨어 뜨려 봅니다. 실제 화면과 다른 크기로 축소됩니다. 어떻게하면 CSS와 HTML, 부트 스트랩 (JS가없는 것)으로이 작업을 수행 할 수 있습니까? 방법이 있습니까? 감사합니다

background-image 및 미디어 쿼리를 포함하는 좀 해키 방법있다

Answer 1

: 이 http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/

(생산 준비가 전투 테스트 버전에 필요한 추가 정보의 전체 기사를 참조하십시오.)

그것은 종기가 로 :

#image { 
    background-image: url(your-large-image.jpg); 
} 

@media only screen and (max-width: 320px) { // change/add media queries as necessary 
    #image { 
    background-image: url(your-small-image.jpg); 
    } 
} 

---

<div id="image"></div> 

,

---

<picture> element 및 srcset attribute도 있지만 현재로서는 완전히 표준화되지 않았거나 널리 지원되지 않습니다.

"JavaScript가 필요하지 않음"요구 사항을 삭제하고 Interchange과 같은 것을 사용하면 가장 효과적 일 수 있습니다.