Установленная высота и прокрутка

Question

Я использую фонды, которые показывают модальные.

<div class="row"> 
    <div class="small-8 columns image-container"> 
     <img src="/img/myimage.jpg"> 
    </div> 
    <div class="small-8 columns text-container"> 
     <!-- Long Text Goes Here --> 
    </div> 
</div> 

Есть ли способ (с использованием CSS), чтобы установить высоту модального поэтому он никогда не превышает высоту изображения, а затем, если длинный текст превышает высоту, сделать его прокрутку?

Answer 1

Высота и переполнения в CSS, с помощью которого вы можете легко контролировать высоту изображения

.image-container{ 
 
    
 
    height:300px /*You can place how much height you want to set*/ 
 
    overflow-y:hidden; 
 
} 
 

 
.image-container img{ 
 
    
 
    height:auto; 
 
    max-height:300px; 
 
    
 
}

<div class="row"> 
 
    <div class="small-8 columns image-container"> 
 
     <img src="/img/myimage.jpg"> 
 
    </div> 
 
    <div class="small-8 columns text-container"> 
 
     <!-- Long Text Goes Here --> 
 
    </div> 
 
</div>

Это может помочь вам

Answer 2

Я думаю, что я получил то, что вам нужно. Пожалуйста, смотрите здесь: https://jsfiddle.net/an1gsdm0/

Я завернул весь ряд в таблице . Изображение и текст являются табличными ячейками в нем. Текстовая ячейка текста имеет встроенный блок div с текстом внутри. Вы можете проверить его, манипулируя размером класса .image. Затем будет изменена высота текстового поля. Вот код:

HTML:

<div class="container"> 
    <div id='first' class='img-div'> 
     <img class="image" src='http://png-4.findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png'/> 
    </div> 

    <div class="outer-text"> 
     <div id='second' class='text-div'>Put a long text here... 
     </div> 
    </div> 
</div> 

CSS:

.container{ 
    display: table-row; 
} 

.img-div { 
    display: table-cell; 
    float: left; 
} 

.outer-text{ 
    display: table-cell; 

    height: 100%; 
    width: 190px; 
} 

.text-div{ 
    display: inline-block; 

    height: 100%; 

    overflow-y: auto; 
} 

Чтобы проверить его на заказ различных размеров изображения изменить высоту изображения:

.image{ 
    height: 190px; 
}