口コミ集を作成したいと思っており、
の左上にペンネーム、
右上に評価の画像
そして、それ以下に口コミ集を書きたいと思っています。
目標は、横幅はdivのなかに収めつつ、画像の形は変形しても構わないので、縦方向に伸縮し、文字がきれいに収まることです。
以下試している途中のコードをかきます。
.review-flame1{ padding: 1% 3% 3% 3%; margin: 2em 2em; background-image: url(/img/review-flame.png); background-size: 100% auto; background-repeat: no-repeat; } .review-flame2 { position: relative; } .review-flame2 p { position: absolute; top: 0;/*画像の左上に配置*/ left: 0; margin: 0; /*余計な隙間を除く*/ font-size: 15px; padding: 5px 10px;/*文字周りの余白*/ }
余白の調整はまだ、行っている途中で数値は微妙ですが、
一つ目の案として、review-flame1にあるように、backgroundでしていし、中に文字を埋め込もうとおもいました。
しかし、size:100% auto;では、横幅に合わせて、高さが自動で調整されるため、口コミの文字が多いとはみ出してしまいます。
しかし、sizeで横幅を指定しておかないと、ブラウザの表示から背景画像自体がはみでます。
2つ目の案も、画像サイズが固定されてしまうと文字がはみ出てしまいます。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。