1

2 つのバナー画像があり、それぞれの高さは同じですが、幅が異なります。それらのそれぞれは<a>タグにネストされており（画像がリンクを開くようにするため）、<a>タグはタグにネストされています<div>。私の問題は、これらの 2 つの画像を隣り合わせに配置し、<div>タグの幅に自動的に調整して、幅の 100% を正確に埋め<div>、個々の画像の幅の比率を同じに保つ必要があることです。div タグは流動的で (画面のサイズに合わせてサイズが変更されます)、これら 2 つの画像が常に 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 = .4最初の画像が 40% 300 / 500 = .6、2 番目の画像が 60% です。

于 2013-05-17T20:01:56.850 に答える
1

高さは同じで幅が違う？

よし、この画像の 2 つの幅もパーセントにして左にフロートさせるだけです。たとえば、1 つの画像の幅が 200px で別の 300px の場合、両方に 40% と 60% を指定しa(表示ブロックを追加するか、フロートを残さずにインライン ブロックを表示することも忘れないでください)、両方の画像に幅 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

私は使うだろう：

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

.banner a {
  display: table-cell;
}

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

このようにして、高さが同じである限り、2 つの画像widthは常に異なる を持つことができます。widths

デモンストレーション- 結果表示のサイズを変更して効果を確認します。

それがあなたを助けたことを願っています!

于 2013-05-17T23:16:07.900 に答える