テキストコンテンツの2つのdivとイメージのあるdivの両方

Question

これらは2つのdiv'sと1つのテキストを持つdivです。もう1つは画像のみの画像です。

私はdiv画像は小さくなり、ビューポートと、それは私が両方divは、メディアクエリを使用せずに同じ高さのままにしたい増加にテキストを持つdiv要素の少しでも変更し、Flexはそこに任意のですオプションを使用してjavascript ??

<div class="book cf"> 
 
      <div class="book-content"> 
 
      <span class="title">world ocean summit 2017</span> 
 
      <p> 
 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
       Delectus aspernatur similique, aperiam suscipit autem 
 
       doloribus quos accusantium, 
 
      </p> 
 
      <a href="#" target="_blank" title="Read More"> 
 
       read more 
 
      </a> 
 
      <a href="#" target="_blank" title="Book Now"> 
 
       book now 
 
      </a> 
 
      <div class="location"> 
 
       <span class="icons"> 
 
        <i class="fa fa-map-o" aria-hidden="true"></i> 
 
       </span> 
 
       <span class="text"> 
 
       bali, indonesia 
 
       </span> 
 
       <span class="icons"> 
 
        <i class="fa fa-calendar" aria-hidden="true"></i> 
 
       </span> 
 
       <span class="text"> 
 
        february 22nd-24th 2017 
 
       </span> 
 
      </div>  
 
      </div> 
 
      <div class="book-image"> 
 
      <img src="http://via.placeholder.com/643x389" alt="Man" /> 
 
      </div> 
 
     </div>

.book-content { 
 
    width: 50%; 
 
    float: left; 
 
    background-color: #5eabd7; 
 
    text-align: center; 
 
} 
 

 
.book-content .title { 
 
    padding-top: 60px; 
 
    display: block; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    font-size: 25px; 
 
    text-transform: uppercase; 
 
} 
 

 
.book-content p { 
 
    padding: 7% 8%; 
 
    color: #fff; 
 
    font-size: 13px; 
 
    line-height: 22px; 
 
} 
 

 
.book-content a { 
 
    padding: 2% 6%; 
 
    display: inline-block; 
 
    color: #000; 
 
    font-size: 14px; 
 
    font-weight: 500; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 

 
.book-content p+a { background-color: #ffffff; } 
 

 
a[title^="Book"] { background-color: #ffe401; } 
 

 
.book-image { 
 
    width: 50%; 
 
    float: right; 
 
} 
 

 
.book-image img { width: 100%; }

Answer 1

幅、高さ、パディング、ボーダーとマージンのスタイルをCSSクラスを定義します。このクラスがイメージに適していることを確認してください。両方のdivにクラスを適用します。必要な場合は、幅や高さなどを持たない別のクラスを作成し、そのクラスを必要とするdivに適用することができます。両方のdivが同じ親（例：body）の子である方がよいでしょう。 ただし、テキストがイメージに関連付けられている場合は、html pictureタグを使用してください。テキストと画像をpタグの中にラップpは画像の子です。これはUXのほうが優れています。 ブラウザは、画面サイズが変わると常にサイズが変更されます。この場合、メディアの画面サイズの変更（応答）を処理するにはCSSも必要です。例えば

<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> 
<source media="(min-width: 465px)" srcset="img_white_flower.jpg"> 
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> 

あなたがここにこの詳細を読むことができます：「https://www.w3schools.com/html/html_images.asp」

Answer 2

は、ちょうどその時、左側のdivにその結果を割り当て、ページの読み込み上の画像の高さを見つけるには、両方のdivは同じ高さに見えます。そのトリックがあなたの助けになるかもしれません。お試しください