「:after」を使って画像の上に画像を重ねたい

質問

スマフォサイトを作っています。
画像を配置して、その上に枠を重ねて表示したいと思いました。
position: relative;
position: absolute;
を使えばできるのは分かっているのですが、
この場合、<img>タグを2つ書かなくてはいけない。

これを写真画像にクラス指定をするだけでいい手段はないかと思い、
「:after」要素を使えばできるのではないかとやってみました。

▼HTML
<p class="photo">
<a href="#"><img src="img/image.jpg"></a>
</p>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>

▼CSS
img {
max-width: 100%;
height: auto;
}

.photo {
position: relative;
}

.photo:after {
position: absolute;
content: url(img/photo_waku.png);
top: 0px;
left: 0px;
}

こんな感じでやってみたところ、添付画像のような状態になりました。
表示はしてくれました。
しかし写真画像は自動でサイズ変更が行われるのに、
枠画像は実寸表示されています。

これはつまり「img」で指定しているスタイルが効いていないということ。
しかしこれをどういじれば、枠画像も自動で変更されるのかが分からなくて困っております。
そもそも可能かどうかも分かっておりません。

ご存知の方いらっしゃいましたら、ご教授いただければ幸いです。
よろしくお願いいたします。

回答No.1

ORUKA1951 · ベストアンサー

:afterで追加される画像は置換インライン要素ですからサイズは画像本来のサイズになります。displayでblockに指定しても利きません。
　スマホがメインの対象でしたら、HTML5、CSS3が利用できますから、6. Border Images( http://www.w3.org/TR/css3-background/#border-images )が使用できます。
<section>
<figure>
<img src="./images/sample01.jpg" width="480" height="360" alt="">
</figure>
<p>
テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト
</p>
</section>
の、figureの周囲に画像ボーダーを使用します。画像はz-indexで後ろに回すことになります。

お礼

お礼が遅くなってすみません。
「Border Images」なんてもの、初めて知りました。
これは使えそうです。
ありがとうございました！