Question

我有两张横幅图片，每张图片都有相同的高度，但宽度不同。它们中的每一个都嵌套在<a>标记中（以使图像打开链接），<a>标记嵌套在<div>标记中。我的问题是，我需要将这两个图像放在一起并自动调整到<div>标记的宽度，以便它们恰好填充<div>宽度的100％，保持比例为个别图像宽度相同。 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>

Answer 1

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

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

样本图片的总宽度为500px，因此第一个和200 / 500 = .4的百分比为300 / 500 = .6或40％，第二个的百分比为60％。

Answer 2

我会使用百分比并浮动图像，因此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;
}

Answer 3

您必须使用（或模拟）表格！：d

我没有触及你的html。我删除了2 <a>之间的空格，我将其括在另一个div（类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%}

And I made a demo too!

Answer 4

我会用：

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

.banner a {
  display: table-cell;
}

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

这样，两张图片width可以始终不同widths，只要它们具有相同的高度。

demonstration - 调整结果显示以查看效果。

希望它能帮到你！

Answer 5

高度相同，宽度不同？

好的，所以如果你现在两个宽度的这个图像也只是使百分比和浮动左。例如，如果一个图像宽200像素，另一个300像素宽，则a只给出40％和60％（不要忘记添加它们也显示块，甚至不显示浮动显示内联块）并给出宽度100两个img的％。如果你不知道宽度，不幸的是你需要使用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%。

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

两张图片完全对齐包含元素的宽度

5 个答案: