Увеличение изображения после конца левого блока

#html #css

Есть текстовый блок с левой стороны. По правой стороне идет блок с изображениями.
Идея в том, что бы после окончания текста, правый блок с картинками становился шириной
100%, и изображения занимали всю ширину.
Игрался много, но желаемого результата не получил. По правой стороне будет столько
картинок, сколько влезет. Нужна динамика.

Ну и собственно вопрос, как заставить изображения увеличится после окончания левого
блока?



.container{
  overflow:hidden;
  width:100%;
}


.container .left_sidebar{
  width:745px;
  margin:0 0 0 55px;
}

.container .right_sidebar img{
  height: 100%;
  padding: 0 0 10px 10px;
}

.left{
  float: left;
}

	

		
тут какой-то текст
		
тут какой-то текст
		
тут какой-то текст
		
тут какой-то текст
	
	
	

		
		
		
		
	






    

Ответы

Ответ 1

Вот так годится? Можно открыть сниппет на полном экране и менять ширину окна, чтобы
текст прижимал вправо разное количество картинок.

https://jsfiddle.net/glebkema/h3yy14gp/



.for-text {
  float: left;
}
.for-image {
  overflow: hidden;
}
.for-image img {
  width: 100%;
}

  
Paragraph.
  
Paragraph Paragraph.
  
Paragraph Paragraph Paragraph.
  
Paragraph.
  
Paragraph Paragraph.
  
Paragraph Paragraph Paragraph.












Ответ 2

.container {
  overflow: hidden;
  width: 100%;
}
.container .left_sidebar {
  width: 40%;
  margin: 0 0 0 55px;
  display: table-cell;
  vertical-align: middle;
}
.container .right_sidebar {
  width: 40%;
  margin: 0 0 0 55px;
  display: table-cell;
  vertical-align: middle;
}

.container .right_sidebar img {
  width: 100%;
  height: auto;
  padding: 0 0 10px 10px;
  display: inline;
}

.container .full_sidebar img {
  width: 100%;
  height: auto;
  padding: 0 0 10px 10px;
  display: inline;
}

  

    
тут какой-то текст
    
тут какой-то текст
    
тут какой-то текст
    
тут какой-то текст