box-shadowがimgとずれる
Q&A
Closed
解決したいこと
こちらhttps://proengineer.internous.co.jp/content/columnfeature/6282
のサイトを参考にimgタグの画像内にinsertの影を漬けたいのですが、下画像のように位置がずれています。
url先のようにheightとwidthを指定するとずれないのですが、画像のサイズに常に影が自動調整されるようにしたいです。
原因、修正方法がわかる方がいましたら教えて下さい。
該当するソースコード
<div class="test">
<div class="ShadowSample1"><img src="https://placehold.jp/150x200.png" alt="" /></div>
</div>
.ShadowSample1 {
box-shadow:0px 0px 10px 10px rgba(0,0,0,0.4) inset;
/* 要素の影（[右][下][ぼかし][広がり][影の色][内側]）を指定する */
display: inline-block;
}
img {
position: relative;
z-index: -1;
}
試したこと
ネットで検索しても該当するQAを見つけられませんでした。AIに質問して以下のコードが生成されましたが、このコードを実行しても影が表示されなくなってしまいます。
box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.4) inset / auto;
0
