When resizing the window, I am facing an issue with the image going outside of the box. I believe adjusting the position top of the image based on the box height might help in fitting the image properly within the box.
$(window).resize(function() {
var boxHeight = $('.box').innerHeight();
var imgHeight = $('.img').height();
});.container {
max-width: 850px;
margin: 0 auto;
}
.box {
background: #fff;
padding: 69px 55px;
border: 1px solid #000;
margin-top: 150px;
border-radius: 6px;
}
.image {
position: absolute;
top: -90px;
right: -41px;
}
@media only screen and (max-width:767px) {
.image {
position: relative;
max-width: 100%;
top: -88px
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="box">
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<img src="https://i.imgur.com/uHoTAhr.png" class="image">
</div>
<div class="col-sm-6 col-sm-pull-6">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
</div>
</div>
</div>