Ответственный div cuts изображения

Question

Я пытаюсь создать div с текстом с закругленными углами, из которых правая сторона содержит изображение (с закругленными углами также). Поскольку этот текст будет подключен к CMS, содержимое может быть изменено когда-нибудь. Вот почему я хочу, чтобы div был отзывчивым: станьте таким же высоким, как текст. и отрезать остальную часть изображения, не теряя округленный угол или уменьшая изображение.

Я включил код ниже, я действительно надеюсь, что кто-то может мне помочь!

.spacing { 
 
    padding: 15px; 
 
} 
 

 
.banners { 
 
    display: block; 
 
} 
 

 
.banner_home { 
 
    min-height: 100px; 
 
    box-shadow: 5px 5px 10px #888; 
 
    margin-top: 20px; 
 
    padding: 0px; 
 
    border-radius: 15px; 
 
    display: block; 
 
} 
 

 
.banner_home_text { 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 

 
.banner_home_text p { 
 
    margin: 15px; 
 
} 
 

 
.banner_home .banner_home_text img { 
 
    float: right; 
 
    padding: 0px; 
 
    border-radius: 0px 15px 15px 0px; 
 
    margin-left: 10px; 
 
    display: block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="banners"> 
 
    <div class="spacing"> 
 
    <div class="banner_home col-xs-12"> 
 
     <div class="banner_home_text"> 
 

 
     <img src="http://placehold.it/375x375" alt="Barbecue"> 
 

 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac lorem eget tellus volutpat pellentesque ut eu libero. Proin et dui ut nibh laoreet varius. Praesent nec dignissim ex. Mauris pharetra convallis lacus, a rhoncus urna porttitor id. Morbi 
 
      vel tellus id quam condimentum egestas. Phasellus elementum molestie lacus. Donec aliquam congue mollis. Sed pellentesque orci tellus, sed fringilla turpis ullamcorper dapibus. 
 
     </p> 
 

 
     <p> 
 
      Duis commodo egestas lacus quis commodo. Duis semper dapibus mi, posuere dictum libero fermentum sed. Etiam ligula eros, ornare nec mattis at, rhoncus vel ante. Vestibulum eget finibus nisl. Nam ullamcorper scelerisque sem non sagittis. Pellentesque habitant 
 
      morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
 
     </p> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Если выше мой комментарий является правильным, как об этом? Изображение абсолютно позиционирован, так что он может скрыть и не толкать DIV вниз ...

.spacing { 
 
    padding: 15px; 
 
} 
 

 
.banners { 
 
    display: block; 
 
} 
 

 
.banner_home { 
 
    min-height: 100px; 
 
    box-shadow: 5px 5px 10px #888; 
 
    margin-top: 20px; 
 
    padding: 0px; 
 
    border-radius: 15px; 
 
    display: block; 
 
} 
 

 
.banner_home_text { 
 
    float: left; 
 
    overflow: hidden; 
 
    position:relative; 
 
    padding-right:375px; 
 
} 
 

 
.banner_home_text p { 
 
    margin: 15px; 
 
} 
 

 
.banner_home .banner_home_text img { 
 
    position:absolute; 
 
    right:0; 
 
    top:0; 
 
    padding: 0px; 
 
    border-radius: 0px 15px 15px 0px; 
 
    margin-left: 10px; 
 
    display: block; 
 
    width:375px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="banners"> 
 
    <div class="spacing"> 
 
    <div class="banner_home col-xs-12"> 
 
     <div class="banner_home_text"> 
 

 
     <img src="http://placehold.it/375x375" alt="Barbecue"> 
 

 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac lorem eget tellus volutpat pellentesque ut eu libero. Proin et dui ut nibh laoreet varius. Praesent nec dignissim ex. Mauris pharetra convallis lacus, a rhoncus urna porttitor id. Morbi 
 
      vel tellus id quam condimentum egestas. Phasellus elementum molestie lacus. Donec aliquam congue mollis. Sed pellentesque orci tellus, sed fringilla turpis ullamcorper dapibus. 
 
     </p> 
 

 
     <p> 
 
      Duis commodo egestas lacus quis commodo. Duis semper dapibus mi, posuere dictum libero fermentum sed. Etiam ligula eros, ornare nec mattis at, rhoncus vel ante. Vestibulum eget finibus nisl. Nam ullamcorper scelerisque sem non sagittis. Pellentesque habitant 
 
      morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
 
     </p> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

.banners { 
    box-shadow: 15px 15px 15px #888; 
    margin-top: 20px; 
    padding: 10px; 
    border-radius: 15px; 
    margin: 10px; 
    overflow: auto; 
} 

img { 
    float: right; 
    width: 40%; 
    border-radius: 15px 15px 15px 15px; 
    padding: 10px; 
    max-width: 100%; 
} 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
<div class="banners"> 
     <img src="http://placehold.it/375x375" alt="Barbecue" class="img-responsive"> 

     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac lorem eget tellus volutpat pellentesque ut eu libero. Proin et dui ut nibh laoreet varius. Praesent nec dignissim ex. Mauris pharetra convallis lacus, a rhoncus urna porttitor id. Morbi 
      vel tellus id quam condimentum egestas. Phasellus elementum molestie lacus. Donec aliquam congue mollis. Sed pellentesque orci tellus, sed fringilla turpis ullamcorper dapibus. 
     </p> 

     <p> 
      Duis commodo egestas lacus quis commodo. Duis semper dapibus mi, posuere dictum libero fermentum sed. Etiam ligula eros, ornare nec mattis at, rhoncus vel ante. Vestibulum eget finibus nisl. Nam ullamcorper scelerisque sem non sagittis. Pellentesque habitant 
      morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
     </p> 

     </div> 

Вам нужно добавить переполнение взломать здесь.