이미지가 화면 크기에 반응하지만 점차적으로 축소되지 않는 방법은 무엇입니까?

Question

동일한 크기 대괄호 안에 화면 크기가 줄어들 때 점차적으로 축소되는 대신 화면 크기가 한 크기에서 다음 크기로 갈 때 이미지가 x 픽셀에서 y 픽셀로 점프됩니다. img-responsive를 적용하면 점차적으로 내려 가고 col-x-y 클래스가 작동하지 않습니다.

Answer 1

아래와 같이 html 그림 태그를 사용할 수 있습니다. 이 예제에서는 화면 크기에 따라 다른 이미지 크기를로드합니다. 그러나이 형식을 기반으로 이미지 폭을 조정할 수도 있습니다. 코드는 this code lab.

<picture> 
<source media="(min-width: 750px)" 
     srcset="images/horses-1600_large_2x.jpg 2x, 
       images/horses-800_large_1x.jpg" /> 
<source media="(min-width: 500px)" 
     srcset="images/horses_medium.jpg" /> 
<img src="images/horses_small.jpg" alt="Horses in Hawaii"> 
</picture> 

에서 제공됩니다.