width:100%; position:absolute;に設定した時親のサイズが取れない

画像を右クリックで保存できないようにしていたのですが、position: absolute;にして幅や高さをパーセント指定にすると画像サイズに合わないので調べてみました。

元々下記のように設定していました。

HTML

<div class="photo" align="center">
  <span class="spacer"> </span>
  <%= image_tag @data[:image] %>
</div>

CSS

.photo {
  width: 61.8%;
  margin: 0 auto;
}

span.spacer {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(spacer.gif);
}

どうやらabsoluteにするとphotoクラスが先祖要素にならず変な値が入っているみたいでこれのcase2のような感じになっていました。

relativeかfixedかabusoluteのサイズしか取れないみたいなので下記のようにwrapperクラスを作りrelativeを設定。

HTML

<div class="photo_detail" align="center">
  <div class="wrapper">
    <span class="spacer"> </span>
    <%= image_tag @data[:image] %>
  </div>
</div>

CSS

.photo {
  width: 61.8%;
  margin: 0 auto;
}

.wrapper {
  position: relative;
}

span.spacer {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(spacer.gif);
}

これで解決しました