定义框图像载荷的尺寸？

Question

在我的网站上，正在加载图像时，图像会加载。

我希望加载空间与要加载的图片大小相同吗？

（我很难用像素定义图像，因为图像目前以百分比定义）

这是我目前的代码 -

<style type="text/css">ul{
            padding: 0;
            list-style: none;
        }
        ul li{
            display: inline-block;
            position: relative;
        }
        ul li a{
            display: block;
            padding: 0px 0px;
            text-decoration: none;
        }
        ul li a:hover{
        }
        ul li ul.dropdown{
            min-width: 125px; /* Set width of the dropdown */
            display: none;
            position: absolute;
            z-index: 999;
            left: 0;
        }
        ul li:hover ul.dropdown{
            display: block; /* Display the dropdown */
        }
        ul li ul.dropdown li{
            display: block;
        }
</style>
<style type="text/css">.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:0px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
</style>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;" summary="main">
	<tbody>
		<tr>
			<td>
			<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 80%;">
				<tbody>
					<tr>
						<td width="12.5%"><a href="https://www.oymyo.com"><img onmouseout="this.src='https://www.oymyo.com/images/o.png'" onmouseover="this.src='https://www.oymyo.com/images/o.gif'" src="https://www.oymyo.com/images/o.png" width="50px" /></a></td>
						<td width="12.5%"><a href="https://www.oymyo.com/about"><img onmouseout="this.src='https://www.oymyo.com/images/_about.png'" onmouseover="this.src='https://www.oymyo.com/images/_about2.png'" src="https://www.oymyo.com/images/_about.png" width="100px" /></a></td>
						<td width="12.5%"><a href="https://www.oymyo.com/store"><img onmouseout="this.src='https://www.oymyo.com/images/_store.png'" onmouseover="this.src='https://www.oymyo.com/images/_store2.png'" src="https://www.oymyo.com/images/_store.png" width="100px" /></a></td>
						<td width="12.5%"><a href="https://www.oymyo.com/news"><img onmouseout="this.src='https://www.oymyo.com/images/_news.png'" onmouseover="this.src='https://www.oymyo.com/images/_news2.png'" src="https://www.oymyo.com/images/_news.png" width="100px" /></a></td>
						<td width="12.5%"><a href="https://www.oymyo.com/art"><img onmouseout="this.src='https://www.oymyo.com/images/_art.png'" onmouseover="this.src='https://www.oymyo.com/images/_art2.png'" src="https://www.oymyo.com/images/_art.png" width="100px" /></a></td>
						<td width="12.5%"><a href="https://www.oymyo.com/fashion"><img onmouseout="this.src='https://www.oymyo.com/images/_fashion.png'" onmouseover="this.src='https://www.oymyo.com/images/_fashion2.png'" src="https://www.oymyo.com/images/_fashion.png" width="100px" /></a></td>
						<td width="12.5%"><a href="https://www.oymyo.com/support.php"><img onmouseout="this.src='https://www.oymyo.com/images/_support.png'" onmouseover="this.src='https://www.oymyo.com/images/_support2.png'" src="https://www.oymyo.com/images/_support.png" width="100px" /></a></td>
						<td width="12.5%">
						<ul>
							<li><a href="#"><img src="https://www.oymyo.com/images/_extras.png" width="100px" /></a>
							<ul class="dropdown">
								<li><a href="https://www.oymyo.com/aiyu.html"><img src="https://www.oymyo.com/images/_aiyu.png" width="100px" /></a></li>
								<li><a href="https://www.oymyo.com/babycakes"><img src="https://www.oymyo.com/images/_babycakes.png" width="100px" /></a></li>
								<li><a href="https://www.oymyo.com/xxcx"><img src="https://www.oymyo.com/images/_xxcx.png" width="100px" /></a></li>
							</ul>
							</li>
						</ul>
						</td>
					</tr>
				</tbody>
			</table>

这是加载时页面当前的外观; https://www.OYMYO.com/images/stackoverflow_image_loading.png

这就是我希望页面在加载时看起来的样子; - https://www.OYMYO.com/images/stackoverflow_image_desired.png

任何帮助将不胜感激[：