使div与其他图像大小相同

Question

我有一个网站，我正在努力，有一个盒子，它有一些链接。我希望这个盒子与它周围的图像大小相同。现在的问题是，当窗口尺寸变小时，图像会缩小或缩小，但带有这些链接的div不会以相同的方式缩放。

这是一张图片（左框是链接，图片是围绕它的）：

这是下载框和图片的html：

<div class="appDownload">
                <header class="downloadHeader"><span class="downloadTitle">Download</span></header>
                <!--<a href="https://itunes.apple.com/us/app/igun-pro-hd/id574123647?mt=8">Apple App Store</a></br>
                <a href="https://play.google.com/store/apps/details?id=com.avidionmedia.iGunHD">Google Play Store</a></br>
                <a href="http://www.amazon.com/iGun-Pro-Original-Gun-App/dp/B00G4E1DOI">Amazon App Store</a></br> -->
                <a href="https://itunes.apple.com/us/app/igun-pro-hd/id574123647?mt=8" target="_blank">
                    <div class="appStoreBadge"><img src="images/App_Store_Badge135x40.svg" width="100%"></div>
                </a>
                <a href="https://play.google.com/store/apps/details?id=com.avidionmedia.iGunHD" target="_blank">
                    <div class="appStoreBadge"><img 
src="images/Google_Play_Badge564x168.png" width="100%"></div>
                </a>
                <a href="http://www.amazon.com/iGun-Pro-Original-Gun-App/dp/B00G4E1DOI" target="_blank">
                    <div class="appStoreBadge"><img 
src="images/Amazon_Badge564x168.png" width="100%"></div>
                </a>


            </div>

图片：

 <div class="appScreenshots">

                <img id="screenshot1" width="100%" src="images/igp1_screenshot_1.png">
                <img id="screenshot2" width="100%" src="images/igp1_screenshot_3.png">
                <img id="screenshot2" width="100%" src="images/igp1_screenshot_5.png">
                <img id="screenshot2" width="100%" src="images/igp1_screenshot_7.png">

            </div>

这是下载框css：

.appDownload{
width: 100%;
margin: 0px 0px 3px 0px;
background: #333;
float: left;
}

这是图像的CSS：

.appScreenshots{
width: 100%;
margin: 0px;
background: transparent;
overflow: hidden;
}

.appScreenshots img{
float: none;
clear: none;
}