我有两个横幅图像，每一个都有相同的高度，但不同的宽度。 它们中的每一个都嵌套在 下面是我的HTML: null
只要你的图像不是动态的（例如，你事先知道宽度），你可以这样做: 示例图像的组合宽度为500px，因此您的百分比为
我将使用百分比和浮动图像，如DEMO http://jsfiddle.net/kevinphpkevin/6h4cv/标记中（以使图像打开一个链接），而标记嵌套在标记中。 我的问题是，我需要这两个图像紧挨着，并自动调整
标记的宽度，以便它们正好填充
宽度的100%，同时保持单个图像宽度的比率相同。 div标签是流动的（它的大小与屏幕的大小），我希望这两个图像是自动调整，以便他们总是填满恰好100%的div宽度。 我如何使用CSS来做这件事。
<div class='banner'>
<a class='mainBanner' href='Help.php?title=Help'><img src='banner1.png' alt='mainBanner' /></a>
<a class='openAccount' href='Profile.php?title=Registration'><img src='banner2.png' alt='openAccount' /></a>
共3个答案
匿名用户
<div class='banner'>
<a class='mainBanner' href='#'><img src='http://placekitten.com/200/200' alt='mainBanner' /></a>
<a class='openAccount' href='#'><img src='http://placekitten.com/300/200' alt='openAccount' /></a>
</div>
.banner {
display: table;
width: 100%;
}
.banner a {
display: table-cell;
}
.banner a:first-child {
width: 40%; /* this image is 200px wide */
}
.banner a:last-child {
width: 60%; /* this image is 300px wide */
}
.banner a img {
width: 100%;
height: auto;
}
200/500=.4或40%（第一个），300/500=.6或60%（第二个）。
匿名用户
.clear {
clear:both;
width:100%;
}
.banner {
width:100%;
background:#000;
}
.mainBanner img{
width:70%;
background:#ff0;
display:block;
float:left;
}
.openAccount img {
width:30%;
background:#ccc;
display:block;
}
相关问题
