1

我有两个横幅图像，每个图像的高度相同但宽度不同。它们中的每一个都嵌套在<a>标签中（以使图像打开链接），并且<a>标签嵌套在<div>标签中。我的问题是，我需要将这两个图像并排放置并自动调整到<div>标签的宽度，以便它们恰好填充 100% 的<div>宽度，同时保持单个图像宽度的比例相同。div 标签是流动的（它会根据屏幕大小调整大小），我希望这两个图像能够自动调整，以便它们始终准确地填充 div 宽度的 100%。我如何使用 css 做到这一点。

这是我的html：

<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>

4

5 回答 5

2

只要您的图像不是动态的（即您事先知道宽度），您就可以这样做：

<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;
}

示例图像的组合宽度为 500 像素，因此第一张的百分比为200 / 500 = .440%，300 / 500 = .6第二张的百分比为 60%。

于 2013-05-17T20:01:56.850 回答
1

您必须使用（或模拟）表格！:D

我没有接触太多你的html。我删除了 2 之间的空白，<a>并将其包含在另一个中div（使用 class derp）。

CSS：

div.derp {display:table; border:1px solid green;width:100%}
div.banner {background:light-blue;border:1px solid blue;display:table-row}
a {display:table-cell;border:1px solid red;}
img {display:block;width:100%}

我也做了一个演示！

于 2013-05-17T20:10:32.403 回答
1

我会使用：

.banner {
  display: table;
  width: 100%;
}

.banner a {
  display: table-cell;
}

.banner a img {
  width: 100%;
  height: auto;
}

这样，两个图像width总是可以有不同widths的，只要它们具有相同的高度。

演示- 调整结果显示大小以查看效果。

希望对您有所帮助！

于 2013-05-17T23:16:07.900 回答
1

高度相同，宽度不同？

好的，所以如果你现在这个图像的两个宽度也只是使百分比并向左浮动。例如，如果一个图像是 200px 宽，另一个是 300px 宽，则只需为两者提供 40% 和 60% a（不要忘记添加它们也显示块或什至显示没有左浮动的内联块）并为两个 img 提供 100% 的宽度。如果您不知道宽度，不幸的是您需要使用 javascript。

非常伪代码，因为我真的很累。

a1.width = img1.width/(img1.width+img2.width)*100+% 

a2.width = img2.width/(img1.width+img2.width)*100+%

当然还有a-display:block和 img 的width:100%。

或者类似的东西，如果你想我明天可以写，但我不确定你正在寻找这个答案，所以我现在不做。

于 2013-05-17T23:27:25.193 回答
1

我会使用百分比并浮动图像，例如 DEMO http://jsfiddle.net/kevinPHPkevin/6H4cV/

.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;
}
于 2013-05-17T20:05:39.853 回答