画面サイズに合わせてイメージとdivを整列する

Question

私は最初のウェブサイトをデザインしようとしています。トップバーのCSSをロゴに合わせるのに問題があります。ユーザーの画面によっては間違っているようですサイズは固定された高さのCSS値で異なって見えます。

これは、私はそれがすべての画面resoloutionsに見えるようにしたいものです。

これは、それが下画面の解像度で次のようになります。

以下

は私のマークアップです。

h1 { 
 
    color: #111; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 45px; 
 
    font-weight: bold; 
 
    letter-spacing: -1px; 
 
    line-height: 1; 
 
    padding: 20px; 
 
} 
 

 
h2 { 
 
    color: #111; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 30px; 
 
    font-weight: 300; 
 
    line-height: 32px; 
 
    margin: 0 0 72px; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    color: #685206; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 14px; 
 
    line-height: 24px; 
 
    margin: 0 0 24px; 
 
    text-align: justify; 
 
    text-justify: inter-word; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 20px; 
 
} 
 

 
.topbar { 
 
    background-color: #EEB84F; 
 
    width: 100%; 
 
    height: 40px; 
 
    padding: 5px; 
 
    position: fixed; 
 
} 
 

 
.logo { 
 
    min-width: 100%; 
 
    width: auto; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    margin-top: -50px; 
 
} 
 

 
.thumbwrapper { 
 
    width: auto; 
 
} 
 

 
.thumb { 
 
    background: white; 
 
    float: left; 
 
    margin: 20px; 
 
} 
 

 
.thumb { 
 
    width: 121px; 
 
    height: 174px; 
 
} 
 

 
.img { 
 
    box-shadow: 10px 10px 5px #888888; 
 
    max-width: 100%; 
 
    width: 121px; 
 
    height: 174px; 
 
    border-radius: 6px; 
 
} 
 

 
.img:hover { 
 
    box-shadow: 10px 10px 5px #666688; 
 
    cursor: pointer; 
 
} 
 

 
.left { 
 
    width: 10%; 
 
    height: 100%; 
 
    position: fixed; 
 
    outline: 1px solid; 
 
    background: #333; 
 
} 
 

 
.right { 
 
    width: 90%; 
 
    height: auto; 
 
    outline: 0px solid; 
 
    position: absolute; 
 
    right: 0; 
 
    background: #FFF; 
 
}

<div class="left"> 
 
    <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="topbar"></div> 
 
    <h1>Latest Additions</h1> 
 
    <div class="wrapper"> 
 
    <div class="thumbwrapper"> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div> 
 
    </div> 
 
    </div> 
 
</div>

またはあなたはそれがthis online location

Answer 1

問題に住んで見ることができますが、あなたが小さな画面に行くときに、あなたのlogo画像は、縮小するということです。画像は10%の幅に収まる必要がありますので、.left divに設定してください。

ここでは構造全体を変更するつもりはありませんが、50pxの高さを.logo（画像の周りのdiv）とbackground-color: #EEB84Fに設定することをお勧めします。これは、topbarにこれらのスタイルが設定されているためです。

次にあなたがディスプレイを使用してlogo IMGをセンタリングすることができますlogo

にFlexは下のスニペットを参照するか、提案としてフィドル>jsFiddle

.logo { 
 
    min-height:50px; 
 
    background:#EEB84F; 
 
    display:flex; 
 
    align-items:center; 
 
} 
 

 
h1 { 
 
    color: #111; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 45px; 
 
    font-weight: bold; 
 
    letter-spacing: -1px; 
 
    line-height: 1; 
 
    padding: 20px; 
 
} 
 

 
h2 { 
 
    color: #111; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 30px; 
 
    font-weight: 300; 
 
    line-height: 32px; 
 
    margin: 0 0 72px; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    color: #685206; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 14px; 
 
    line-height: 24px; 
 
    margin: 0 0 24px; 
 
    text-align: justify; 
 
    text-justify: inter-word; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 20px; 
 
} 
 

 
.topbar { 
 
    background-color: #EEB84F; 
 
    width: 100%; 
 
    height: 40px; 
 
    padding: 5px; 
 
    position: fixed; 
 
} 
 

 
.logo { 
 
    min-width: 100%; 
 
    width: auto; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    margin-top: -50px; 
 
} 
 

 
.thumbwrapper { 
 
    width: auto; 
 
} 
 

 
.thumb { 
 
    background: white; 
 
    float: left; 
 
    margin: 20px; 
 
} 
 

 
.thumb { 
 
    width: 121px; 
 
    height: 174px; 
 
} 
 

 
.img { 
 
    box-shadow: 10px 10px 5px #888888; 
 
    max-width: 100%; 
 
    width: 121px; 
 
    height: 174px; 
 
    border-radius: 6px; 
 
} 
 

 
.img:hover { 
 
    box-shadow: 10px 10px 5px #666688; 
 
    cursor: pointer; 
 
} 
 

 
.left { 
 
    width: 10%; 
 
    height: 100%; 
 
    position: fixed; 
 
    outline: 1px solid; 
 
    background: #333; 
 
} 
 

 
.right { 
 
    width: 90%; 
 
    height: auto; 
 
    outline: 0px solid; 
 
    position: absolute; 
 
    right: 0; 
 
    background: #FFF; 
 
}

<div class="left"> 
 
    <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="topbar"></div> 
 
    <h1>Latest Additions</h1> 
 
    <div class="wrapper"> 
 
    <div class="thumbwrapper"> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div> 
 
    </div> 
 
    </div> 
 
</div>

、あなたは.topbarを置く必要がありますleftとright divの外側その中にロゴを入れてください。

あなたの構造も

<div class="topbar"> 
    <div class="logo"> 
      <img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /> 
    </div> 
</div> 
<div class="content"> 
    <div class="left"> 
    </div> 
    <div class="right"> 
    </div> 
</div> 

あなたがleftのdiv、あなたは簡単に新しいdiv要素のないことgrayセクション（などボーダーまたは擬似要素）

Answer 2

を作ることができることを必要とする理由ではないことを確認のようなものでなければなりません

ロゴを重ならずに常に上に表示するには、ロゴイメージの特定の高さを約height: 50pxに設定します。それ以外の場合は、media queryを使用して、解像度を低くするために高さを設定します。

Answer 3

の高さを.topbar + paddingと同じだけ増やしてください。その後、transformの画像を中心にして.logoを使用して、必要に応じて特定の画面解像度でメディアクエリを使用する必要があります。詳細な回答のため

h1 { 
 
    color: #111; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 45px; 
 
    font-weight: bold; 
 
    letter-spacing: -1px; 
 
    line-height: 1; 
 
    padding: 20px; 
 
} 
 

 
h2 { 
 
    color: #111; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 30px; 
 
    font-weight: 300; 
 
    line-height: 32px; 
 
    margin: 0 0 72px; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    color: #685206; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 14px; 
 
    line-height: 24px; 
 
    margin: 0 0 24px; 
 
    text-align: justify; 
 
    text-justify: inter-word; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 20px; 
 
} 
 

 
.topbar { 
 
    background-color: #EEB84F; 
 
    width: 100%; 
 
    height: 40px; 
 
    padding: 5px; 
 
    position: fixed; 
 
} 
 

 
.logo { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #EEB84F; 
 
} 
 

 
.logo > img { 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    margin-top: -50px; 
 
} 
 

 
.thumbwrapper { 
 
    width: auto; 
 
} 
 

 
.thumb { 
 
    background: white; 
 
    float: left; 
 
    margin: 20px; 
 
} 
 

 
.thumb { 
 
    width: 121px; 
 
    height: 174px; 
 
} 
 

 
.img { 
 
    box-shadow: 10px 10px 5px #888888; 
 
    max-width: 100%; 
 
    width: 121px; 
 
    height: 174px; 
 
    border-radius: 6px; 
 
} 
 

 
.img:hover { 
 
    box-shadow: 10px 10px 5px #666688; 
 
    cursor: pointer; 
 
} 
 

 
.left { 
 
    width: 10%; 
 
    height: 100%; 
 
    position: fixed; 
 
    outline: 1px solid; 
 
    background: #333; 
 
} 
 

 
.right { 
 
    width: 90%; 
 
    height: auto; 
 
    outline: 0px solid; 
 
    position: absolute; 
 
    right: 0; 
 
    background: #FFF; 
 
}

<div class="left"> 
 
    <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="topbar"></div> 
 
    <h1>Latest Additions</h1> 
 
    <div class="wrapper"> 
 
    <div class="thumbwrapper"> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div> 
 
    </div> 
 
    </div> 
 
</div>