CSSのみでテキスト、画像をそれぞれ１カラムの中でリキッドレイアウトにしたい

Question

CSSのみでテキストを１カラムの中でリキッドレイアウトにするにはどのように記述すれば良いでしょうか？

HTML
<div class="p-wrapper">
  <div class="p-wrapper__inner">
    <div class="p-wrapper__inner--title">
      <h1 class="pwrapperThird__inner--titleInner">タイトル
  </h1>
    </div>

CSS　
.p-wrapper {
  margin-top: 20px;
  border: solid 2px #C7C7C7;
  outline: solid 5px #EFEFEF;
}
.p-wrapper__inner {
  padding: 10px 0 5px 0;
  margin: 0 3%;
}

.p-wrapper__inner--title {
  border-bottom: solid 1px #BDBDBD;
}

.p-wrapper__inner--titleInner {
  width: 220px;
  background-image: url(../img/kagu_interior.png);
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: left;
  padding: 10px 0 10px 25px;
  font-size: 15px;
}

HTMLは現在上記のようになっています。
wrapperとwrapper__innerの幅は320~751です。
”タイトル”の部分をウィンドウ幅に合わせて大きさを変えたいです。

また、<div class="p-wrapperThird__inner--titleInner"><img src="***"</div>
だった場合の画像をリキッドレイアウトにする方法も知りたいです。

タイトルの文字サイズ、画像の縦横比率をウィンドウ幅320~751にかけて大きくしたいです。
宜しくお願い致します。

Comments

[x_x]

h1 の子として div は取れません。
修正のうえでどうしたいのかを書いてください。

[kei344]

「”タイトル”の部分」は文字サイズのことでしょうか。現状のHTML/CSS全体を提示して、スクリーンショットなどでどの部分をどうしたいか具体的に提示されたほうが回答が付きやすいと思います。

[moooaka]

お二人様ともご指摘ありがとうございます。
修正致しましたのでご確認の程お願い致します。

[kei344]

現状のHTML/CSS全体を提示してください。

[kei344]

何度も修正依頼して申し訳ないが、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。Markdown記法が採用されているため、一部文字列が正確に再現できていません。

[moooaka]

こちらこそお手数をおかけしております。これでいかがでしょうか。

[kei344]

画像の状態を再現するには p-wrapper__inner--titleInner という要素も要るはずですがありません。HTML/CSSは要素とその関係によって描画されるため、ある程度状況を再現できる状態にされることをお勧めします。提示されたコードではこうなります ⇒ https://jsfiddle.net/gLh5ezby/

Answer 1

フォントサイズの単位をpxではなくvwで指定するとよいかと！
vwはフォントサイズ以外のサイズ指定にも使えて便利なので一度検索してみるのがいいと思います！
（僕はうまく説明できないのでvw便利とだけ言っときます）
リキットデザインならvwはよく使うと思うので頑張ってください！！