CSS о высоте 100vh отзывчивый

Question

Интересно, что я мог бы сделать с этим, я хочу что-то вроде height: 100vh; или любой код, чтобы установить мою (image / div) высоту, чтобы она соответствовала или отвечала на 100% при первом открытии моего сайта в веб / браузере для мобильных устройств. Я понимаю, используя @media screen,
Когда я перетаскиваю мышь вверх и вниз в браузер маленький, мой height: 100vh; Это делает мой (div / image) таким маленьким, потому что он 100vh, но я хочу что-то вроде моего (div / image) still height 100vh независимо от того, что я перетаскиваю свой браузер вверх и вниз, и у него нет места и все той же высоты, как в первый раз. Я пробовал 40rem выглядит как 100vh и выглядит хорошо. но я хочу узнать любой способ или ваше предложение

если вы не знаете, что я имею в виду, давайте посмотрим на мои проблемы здесь: Это мое изображение!
(Спасибо)

.image  {  display:block; width:auto; height:100vmin; overflow:hidden; }


.image img  { display:block;  width:auto; height:100vmin; 
	position:absolute; 
 	left: 50%;
    transform: translateX(-50%); 
	margin: auto;
	opacity:1;
   }
   
   
   
.middle {
	
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
	background:white; padding:30px;
	
	width:60%;

}



.bg-news-layout
{ display: inline-block; width:100%; height:auto;  position:relative;   background:white;  margin:0 auto;
 padding:0;  }



.col-news {  display:inline-block; width:33.33%;  height: auto;   background:pink;  position:relative; 
padding:0; margin:0;  white-space: normal;    overflow: hidden;  float: left;  }

<div class="bg-news-layout"> 

<div class="col-news">
<a href="#">
<div class="image">
<img src="https://images.pexels.com/photos/5390/sunset-hands-love-woman.jpg?auto=compress&cs=tinysrgb&h=350">
</div>
</a>
<div class="middle"> Text1 </div> 
</div> 
  
 <div class="col-news">
<a href="#">
<div class="image">
<img src="https://images.pexels.com/photos/5390/sunset-hands-love-woman.jpg?auto=compress&cs=tinysrgb&h=350">
</div>
</a>
<div class="middle"> Text2 </div> 
</div>

<div class="col-news">
<a href="#">
<div class="image">
<img src="https://images.pexels.com/photos/5390/sunset-hands-love-woman.jpg?auto=compress&cs=tinysrgb&h=350">
</div>
</a>
<div class="middle"> Text3 </div> 
</div>

</div>