самозагрузки ввиду 768px, изображение не будет отображаться

Question

Я в настоящее время работает с системой самозагрузки сетки и получил следующую задачу: решение должно быть так работать: http://ciiznv.axshare.com/#c=2

 <div class="row "> 
    <div class="col-md-6 col-sm-6 col-xs-12 bg-two col-sm-height col-middle nopadding"> 
     <div class="col-md-6 col-sm-12 col-xs-12 col-sm-height col-middle"> 
      <div class="item"> 
       <div class="content"> 
        <h2>Text one</h2> 
        <p>lorem ipsum dorem</p> 
       </div> 
      </div>  
     </div> 
     <div class="col-md-6 col-sm-12 col-xs-12 col-sm-height col-middle nopadding "> 
      <div class="item nopadding"> 
       <div class="content">      
       <img class="lazyload" sizes="(min-width: 40em) 80vw, 100vw" 
      srcset="http://lorempixel.com/356/150/ 375w, http://lorempixel.com/480/150/ 480w, http://lorempixel.com/768/250/ 768w, http://lorempixel.com/480/480/ 800w" alt="a picture" /> 
       </div> 
      </div> 
     </div>  
    </div> 



    <div class="col-md-6 col-sm-6 col-xs-12 bg-three col-sm-height col-middle nopadding"> 
     <div class="col-md-6 col-sm-12 col-xs-12 col-sm-height col-middle"> 
      <div class="item"> 
       <div class="content"> 
        <h2>Text two</h2> 
        <p>lorem ipsum dorem dolor</p> 
       </div> 
      </div>  
     </div> 
     <div class="col-md-6 col-sm-12 col-xs-12 col-sm-height col-middle nopadding"> 
      <div class="item nopadding"> 
       <div class="content">    
       <img class="lazyload" sizes="(min-width: 40em) 80vw, 100vw" 
      data-srcset="http://lorempixel.com/356/150/ 375w, http://lorempixel.com/480/150/ 480w, http://lorempixel.com/768/250/ 768w, http://lorempixel.com/480/480/ 800w" alt="a picture" /> 
       </div> 
      </div> 
     </div>  
    </div> 

</div> 

Но ввиду из 768px, изображение не будет отображаться

Answer 1

Я думаю, что вам не хватает класса .img-responseive на ваших изображениях. См. Это fiddle