flex-boxで横並びにして画像の大きさを指定する方法

Question

テキストを入力した要素と画像の要素を
画面幅に対して3：7で横並びにして高さを揃えたいのですが、
画像の大きさが元サイズで表示されてしまいます。
どのようにしたらいいかお教えいただけると助かります。

<div id="introduce-wrapper">
		<div class="container">
			<div class="introduce-contents">
				<div class="introduce">
					<h3 class="introduce-heading">タイトル</h3>
					<p class="introduce-text">テキスト</P>
					<div class="intoroduce-btn">
						<a class="btn">ボタン</a>
					</div>
				</div>
				<div class="introduce-img room">
					<img  src="room.JPG">
				</div>
			</div>

.introduce-contents{
	display:flex;
	flex-direction:row;
	width:100%;
	margin:0 auto;
}

.introduce-image{
	width:70%;
	height:auto;
	margin:0 auto;
}
	

Answer 1

introduce-image というクラスを持った要素がHTMLに存在しません。

.introduce-contents{
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0 auto;
}
.introduce {
  flex-grow: 3;
}
.introduce-img{
  flex-grow: 7;
}
.introduce-img > img {
  min-width: 100%;
}

やりかたは色々ありますが、シンプルに幅を3:7にしたいならこんな感じで実現できると思います。

Comments

[sanayaaan]

回答ありがとうございました！！凡ミスですみません。。。

Answer 2

これでどうでしょう。

.introduce-image{
    width:70%;
    height:auto;
    margin:0 auto;
}
.introduce-image img {
    width: 100%;
}

Comments

[sanayaaan]

やってみたのですがうまくいきませんでした。。。

[kei344]

HTMLには .introduce-img と指定されているので、そこを直してみてください。
https://jsfiddle.net/6s4hzp0w/

[sanayaaan]

!!凡ミスですね。。。失礼いたしました。ありがとうございました！