以下のコードを実行するのですが、画像はレシポンシブに対応するのですが、
画像の上の文字がそのままで画像からはみ出てしまいます。
どうすれば、ブラウザのサイズにあわせて文字も変化するでしょうか?
https://saruwakakun.com/html-css/reference/image-text
を参考にしました。
<style> .example { position: relative; } .example p { position: absolute; top: 10%; left: 20%; -ms-transform: translate(-20%,-20%); -webkit-transform: translate(-20%,-20%); transform: translate(-20%,-20%); margin:0; padding:0; color: red;/*文字は白に*/ font-weight: bold; /*太字に*/ font-size: 2em;/*サイズ2倍*/ font-family :Quicksand, sans-serif;/*Google Font*/ } .example img { width: 60%; } </style> <div class="example"> <img src="main1.jpg" /> <p>あいうえおかきくけこ <br/> あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえお<br />ABCDEFGHIJ</p> </div>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。