I'm currently working on crafting a div with text and rounded corners, where the right side features an image also with rounded corners. Since this content will eventually be tied to a CMS, it may change in the future. That's why I need the div to adapt responsively: adjust its height based on the text content and trim the excess part of the image without sacrificing the rounded corner or resizing the image.
Below is the code snippet that I've included, and I am really hoping for some assistance!
.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>