ボックスに合わせて文字サイズを変更する方法

Question

###前提・実現したいこと
現在webアプリケーション作っていて、ユーザーが入力した文字データと画像ファイルを見やすくまとめるためのcssを書いています。
ボックス内に文字と画像が全て入るよう、ボックスのサイズに合わせて文字サイズや画像の大きさを自動で調節できるようなcssを書きたいのですが、書き方がよくわからなくて困っています。
どなたか書き方を教えてください。

Comments

[kei344]

ご自身で書かれたコードと「どういう条件のとき」に「どうしたいか」の例を質問文に追記されたほうが回答を得られやすいと思います。

[Lhankor_Mhy]

補足願います。・ボックスの幅は固定ですか？固定であれば指定の内容を教えてください。　・ボックスの高さは固定ですか？成り行きですか？　・画像と文字のレイアウトをワイヤーフレームでご提示ください。　　　たぶん、CSSだと完全にコントロールするのは難しいかと思います。webページは基本的に成り行きのレイアウトなので。

Answer 1

僕は、バクエンドの方ですが、cssマスターではないですが、以下のように書けばどうでしょう...
もし、文字のサイズも変わって欲しかったら、font-sizeを vw　で指定すればいいと思います。

（日本語のミスはすまん！）

html↓

<div class="box">
  <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" class="mypic">
  <p>
  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  </p>
</div>

css↓

.box {
  border:1px solid black;
  width:400px;
  height: auto;
}
.mypic {
  width: 100%;
  height: auto;
}