ブログ上の特定の画像はたまにしか表示されません

Question

私はプロフェッショナルではないので、私の経験が不足しています。ここで

は私が設定したブログです：http://cyclesguy.blogspot.com

問題は、私は私が「、これまでの（特定のアクションを実行するまで、メインロゴの下にソーシャルメディアのアイコンは、ほとんどの時間を表示されないということですコンソールをズームして開くと画像が表示されることがわかりました）。

私は実際に何が起こっているのか分かりません。このソートをするには少し助けが必要です。どんな助けでも大歓迎です。

は、ここでHTMLスニペットです：

<div class='logocontainer'> 
    <a class='logolink' href='https://cyclesguy.blogspot.com'> 
    <img alt='Cycles Guy Logo Short' src='http://i.imgur.com/1l3re6Y.png?1'/> 
    </a> 
    <div id='headerlinks'> 
    <a href='#'> 
     <img alt='Facebook' src='http://i.imgur.com/rrBYf58.png' title='Facebook'/> 
    </a> 
    <a href='#'> 
     <img alt='Twitter' src='http://i.imgur.com/Tj2tekG.png' title='Twitter'/> 
    </a> 
    <a href='#'> 
     <img alt='Google Plus' src='http://i.imgur.com/0lmq5f9.png' title='Google Plus'/> 
    </a> 
    <a href='#'> 
     <img alt='YouTube' src='http://i.imgur.com/0qf9Ghi.png' title='YouTube'/> 
    </a> 
    </div> 
</div> 

、関連するCSSスニペット：

.logocontainer { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    display: block; 
    align-items: center; 
    transform: translate(-50%,-50%); 
    height: auto; 
    width: auto; 
} 
#headerlinks { 
    display: flex; 
    justify-content: space-around; 
    min-width: 500px; 
    max-width: 40vw; 
} 
#headerlinks a { 
    height: auto; 
    width: auto; 
} 
#headerlinks a img { 
    display: block; 
    height: 100%; 
    width: 4vw; 
    min-width: 55px; 
    -webkit-filter: drop-shadow(8px 8px 8px rgba(0,0,0,1)); 
    opacity: .5; 
    max-width: 60px; 
} 
#headerlinks a img:hover { 
    opacity: 1; 
} 
.logolink img { 
    position: relative; 
    z-index: 1000; 
    min-width: 500px; 
    max-width: 30vw; 
    -webkit-filter: drop-shadow(10px 10px 10px #000); 
    -moz-filter: drop-shadow(10px 10px 10px #000); 
    -ms-filter: drop-shadow(10px 10px 10px #000); 
    -o-filter: drop-shadow(10px 10px 10px #000); 
    filter: drop-shadow(10px 10px 10px #000); 
} 
.logolink img:hover { 
    -webkit-filter: brightness(110%) drop-shadow(10px 10px 10px #000); 
    filter: brightness(110%) drop-shadow(10px 10px 10px #000); 
    -moz-filter: brightness(110%) drop-shadow(10px 10px 10px #000); 
    -ms-filter: brightness(110%) drop-shadow(10px 10px 10px #000); 
    -o-filter: brightness(110%) drop-shadow(10px 10px 10px #000); 
} 
a.logolink { 
    display: block; 
    height: auto; 
    width: auto; 
} 

私が必要とされる任意の付加的な情報を提供するために喜んでいると思います。

編集：問題は今解決されたようです。私はHTMLやCSSに変更を加えませんでしたが、イメージをimgurに再ホストしましたが、今は正常に動作しているようです。以前は、http://www.iconfinder.comへの直接リンクを使用していたため、おそらく問題が発生していました。 回答したすべての人に感謝します。

Answer 1

#headerlinks a img { height: 100%;

ここでの問題は、画像が親（自動車）の高さになりますので、あなたが本当に親は、あなただけの高さを変更することができたものの高さを知ることができません高さが100％を持っているということです自動、また​​はその行を自動的に削除するので、その行を削除するだけです。