htmlとcssを使用してモバイル版ウェブサイトに画像が読み込まれないのはなぜですか？

Question

私のペンの画像http://codepen.io/niffyy/pen/GNzpNW?editors=1100は、モバイル画面に表示されません。

<div class="row"> 
<div class="container" id="third"> 
     <p class="para2"> Portfolio </p> 
    <div class="col-xs-6 col-md-6"> 
     <div><a href='http://codepen.io/niffyy/full/VPZLpj/' class="thumbnail"><img src="http://i.imgur.com/YiCHp7M.jpg" alt="screenshot"></a><h5>Simple Nelson Mandela Tribute Page</h5> 
     </div> 

     <div><a href='#' class="thumbnail"><img src="http://i.imgur.com/mMJs4kq.png" alt="screenshot3"></a><h5> Coming soon!</h5> 
</div> 

    </div> 

     <div class="col-xs-6 col-md-6"> 
     <div><a href='http://codepen.io/niffyy/full/GNzpNW/' class="thumbnail"><img src="http://i.imgur.com/z5PtrqQ.jpg" alt="screenshot1"></a><h5> Portfolio Page</h5> 
    </div> 

     <div><a href='#' class="thumbnail"><img src="http://i.imgur.com/mMJs4kq.png" alt="screenshot2"></a><h5> Coming soon!</h5> 
</div> 



    </div> 
    </div> 
    </div> 



<div class="col-xs-6"> <img class="img-responsive" id="me" alt="a picture of me" src="http://i.imgur.com/EWx1Z9x.jpg"> 
     </div> 

< --THE CSS - >

#me{ 
    width:100%; 
    height: auto; 

    margin-top:45px; 
    margin-bottom:30px; 
    border-style: solid; 
    border-width:5px; 
    border-radius:20px; 
    border-color:#FF33CC; 
} 

私はJPEGにpngをしても、それをアップロードする前に画像をリサイズからフォーマットを変更しようとしたが、それはまだこれを動作しないものために行きますウェブサイト上のサムネイルと私はなぜわかりません。私は間違いのコードをチェックしたが、どこが間違っているのか分からなかった。それは机の上に上品に表示されます。

Answer 1

imgur.comを使用して画像をホストしていて、自分のページにホットリンクしていました。これは私のページに画像がロードされていなかった理由ではありません。将来誰かが私と同じ問題を抱えている場合は、自分のページに使用しようとしている画像にホットリンクが許可されていることを確認してください。私は別の場所にホスティングサイトを切り替え、今私の画像は正常に動作します。使用のImgurの観点から

：

「私たちは、フォーラムにホットリンクできますが、ホットリンク画像はブログの記事、アバター、サイト元素、 や広告など、ウェブサイトの コンテンツとして使用することはできません。あなたはサービスの詳細を読むことができます