Отзывчивое изображение и сетка

Question

У меня есть две коробки. Один содержит изображение, а другой текст. Как я могу сделать подгонку изображения в соответствии с размером окна Причина в данный момент изображение, стекающей по размеру коробки, как вы можете увидеть в моем коде:

 <div class="left-column"> 
     <img src="http://www.opulencesoaps.co.za/Images/2links.jpg" alt=""> 
    </div> 

    <div class="right-column"> 
     <h2>Nevex has the experience</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum rem a tempore tenetur unde alias amet deserunt veritatis. Nemo, iste, quis! Eligendi dolores similique id nostrum non, in velit?</p> 
     <button class="button" type="button" onclick="There will be more information in future">FIND OUT MORE</button> 
    </div>   

Ниже CSS

* { 
    box-sizing: border-box; 
} 
    img{ 
    max-width=100%; 
    height: auto; 
    width: auto; 
    } 
.left-column{ 
    width:50%; 
    height:auto; 
    float: left; 
    border:1px solid red; 
} 
.right-column{ 
    width:50%; 
float: left; 
border:1px solid red; 
} 

https://jsfiddle.net/Wosley_Alarico/b2htLvcj/4/

в конце я хотел бы иметь обе коробки рядом друг с другом с тем же размером и текст с выравниванием по центру с помощью медиа запросов.

Помощь будет оценена по достоинству.

Answer 1

Вы можете использовать flexbox для размера вашей колонки. Но вам нужно добавить div.

Пример:

* { 
 
    box-sizing: border-box; 
 
} 
 

 
img{ 
 
    max-width:100%; 
 
} 
 

 
.header{ 
 
    border:1px solid red; 
 
} 
 

 
.left-column{ 
 
    width:50%; 
 
    border:1px solid red; 
 
} 
 

 
.right-column{ 
 
    width:50%; 
 
    border:1px solid red; 
 
    display:inline-block; 
 

 
    margin: 0; 
 
vertical-align:middle; 
 
} 
 

 
.content{ 
 
     display:flex; 
 
    }

<div class="content"> 
 
<div class="left-column"> 
 
      <img src="http://www.opulencesoaps.co.za/Images/2links.jpg" alt=""> 
 
     </div> 
 
     
 
     <div class="right-column"> 
 
      <h2>Nevex has the experience</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum rem a tempore tenetur unde alias amet deserunt veritatis. Nemo, iste, quis! Eligendi dolores similique id nostrum non, in velit?</p> 
 
      <button class="button" type="button" onclick="There will be more information in future">FIND OUT MORE</button> 
 
     </div>   
 
</div>

Answer 2

У вас есть ошибка в коде CSS: max-width=100%; должно быть max-width:100%; с двумя очками.

Answer 3

Поместите изображение внутри DIV с классом image. Проверь это.

HTML

<div class="image"> 
     <img src="http://www.opulencesoaps.co.za/Images/2links.jpg" alt=""> 
    </div> 

CSS

.image img { 
    max-width:100% !important; 
    max-height:100% !important; 
    display:block; 
}