Q&A
やってみたのですがうまくいきませんでした。。。
テキストを入力した要素と画像の要素を
画面幅に対して3：7で横並びにして高さを揃えたいのですが、
画像の大きさが元サイズで表示されてしまいます。
どのようにしたらいいかお教えいただけると助かります。
HTML
1 2<div id="introduce-wrapper"> 3 <div class="container"> 4 <div class="introduce-contents"> 5 <div class="introduce"> 6 <h3 class="introduce-heading">タイトル</h3> 7 <p class="introduce-text">テキスト</P> 8 <div class="intoroduce-btn"> 9 <a class="btn">ボタン</a> 10 </div> 11 </div> 12 <div class="introduce-img room"> 13 <img src="room.JPG"> 14 </div> 15 </div> 16
CSS
1 2.introduce-contents{ 3 display:flex; 4 flex-direction:row; 5 width:100%; 6 margin:0 auto; 7} 8 9.introduce-image{ 10 width:70%; 11 height:auto; 12 margin:0 auto; 13} 14 15
回答2件
0
introduce-image というクラスを持った要素がHTMLに存在しません。
css
1.introduce-contents{ 2 display: flex; 3 flex-direction: row; 4 width: 100%; 5 margin: 0 auto; 6} 7.introduce { 8 flex-grow: 3; 9} 10.introduce-img{ 11 flex-grow: 7; 12} 13.introduce-img > img { 14 min-width: 100%; 15}
やりかたは色々ありますが、シンプルに幅を3:7にしたいならこんな感じで実現できると思います。
投稿2020/05/16 12:09
総合スコア2982
0
ベストアンサー
これでどうでしょう。
CSS
1.introduce-image{ 2 width:70%; 3 height:auto; 4 margin:0 auto; 5} 6.introduce-image img { 7 width: 100%; 8}
投稿2020/05/16 12:01
総合スコア69606
HTMLには .introduce-img と指定されているので、そこを直してみてください。
https://jsfiddle.net/6s4hzp0w/
!!凡ミスですね。。。失礼いたしました。ありがとうございました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/16 12:14