0

流動的なパズル画像の中に黒い長方形を配置しました。十分な画面スペースがある場合は、必要な場所に完全に配置されて表示されます。ただし、ウィンドウを縮小すると、背後のパズル画像は期待どおりにサイズ変更されますが、内部の長方形はサイズ変更されません。四角形を外側の画像の相対位置に配置し、外側の画像のサイズを変更するにはどうすればよいですか？

これは、画面が十分に広いときに機能するものです。

<body>
    <div>
    <img height="100%" width="100%" src="http://db.tt/hziXuB1a"/>
    <div style="position:absolute; left:58%; bottom:48%;">
        <a href="a.html"><img src="http://db.tt/27WmDZlc"></a>
    </div>
</body>

http://jsfiddle.net/R7t6C/27/

外側の800x400画像の場合と同様に、内側の画像に幅と高さを追加するだけでは不十分です。問題は、（アウターの場合のように）position：relativeを使用しないことです。これは、（静的以外の位置を持つ最初の親要素に対する）外側の画像のパーセンテージとして位置を指定するために私が知っている唯一の方法です。

4

2 に答える 2

1

width: 100%内側の画像にandを追加するとheight: 100%、少なくともサイズが変更されます。

<img style="width: 100%; height: 100%" src="http://db.tt/27WmDZlc">

サイズを変更すると移動しますが、親との関係でどこにあるのかわかりません。

于 2012-07-13T01:33:09.493 に答える
0

HTML: 

<div id="wrapper">
  <img id="puzzle" src="http://db.tt/hziXuB1a"/>
  <a id="link" href="a.html"><img src="http://db.tt/27WmDZlc"></a>
</div>

CSS:

div#wrapper{
    position: relative;
}
img#puzzle{
    width:100%;
}
a#link{
    display:block;
    position:absolute;
    left:58%;
    top:23%;
    right: 10%;
}
a#link img{
    width:100%;
}

デモ:
http://jsfiddle.net/R7t6C/55/

注:
<style type="text/css"></style>jsfiddle の css セクションでは必要ありません

于 2012-07-13T10:29:52.060 に答える