質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1222閲覧

画像ボックスの中に文字をおさめる方法

goldg

総合スコア14

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/09/12 03:40

口コミ集を作成したいと思っており、
イメージ説明
の左上にペンネーム、
右上に評価の画像
イメージ説明
そして、それ以下に口コミ集を書きたいと思っています。
目標は、横幅は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つ目の案も、画像サイズが固定されてしまうと文字がはみ出てしまいます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

この画像なら、以下のようなやり方で、角が伸びないように高さを可変させることが可能です。

html

1<div class="review-flame"> 2 <div class="review-cont"> 3 airuheliughaeliughegiu<br> 4 airuheliughaeliughegiu<br> 5 airuheliughaeliughegiu<br> 6 airuheliughaeliughegiu<br> 7 airuheliughaeliughegiu<br> 8 </div> 9</div>

css

1.review-flame { 2 width: 697px; 3} 4.review-flame:before , 5.review-flame:after { 6 background: url(review-flame.png) no-repeat; 7 content: ''; 8 display: block; 9 height: 30px; 10} 11.review-flame:before { 12 background-position: top; 13} 14.review-flame:after { 15 background-position: bottom; 16} 17.review-cont { 18 background: url(review-flame.png) no-repeat center / 100% 1000%; 19 padding: 0 30px; 20} 21

投稿2018/09/12 05:39

kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

border-image を使うのが簡単かと思います。

CSS

1.review-flame1 { 2 border: 25px solid #ddd; 3 border-image: url(/img/review-flame.png) 25 fill; 4}

https://developer.mozilla.org/ja/docs/Web/CSS/border-image

投稿2018/09/12 04:23

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

goldg

2018/09/12 06:43

前から気になってた方法なんですが、よく理解できていないままでした。 色んなブラウザでも適用可能で、感動いたしました。
guest

0

画像が伸縮しても構わないのであれば
background-size: 100% 100%;
でいいような気がします。

投稿2018/09/12 04:01

keisukeh

総合スコア657

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

goldg

2018/09/12 04:09

さきほどやってみて、ならないと思ったらキャッシュが残っておりました。 ちなみに、画像比を変えないで、文字サイズを変えるなどして別の対処方法はあるでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問