动态改变尺寸的顶部位置

Question

I'm trying on resize the window to change the position top of the image so the image to be fit in the box, because it's changing on resize and the image is going too much outside. I'm not sure do I need the height of the box and the image and then to do something with position top.

 $(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> 

Answer 1

You are facing problems because of your .box container padding. Remove the padding.

I would also suggest to adjust your image using transform and wrap the content in <p> tag and set it center using position:absolute . And for responsive set position:relative for content. I have also done some changes in your HTML markup.

Stack Snippet

 .container { max-width: 850px; margin: 0 auto; } .box { background: #fff; padding: 0; border: 1px solid #000; margin-top: 150px; border-radius: 6px; position: relative; } .image { position: relative; max-width: 100%; transform: translateY(-9%) translateX(0%); margin-bottom: -20px; } .text { position: absolute; width: 50%; top: 50%; transform: translateY(-50%); left: 30px; } @media only screen and (max-width:767px) { .text { position: relative; padding: 20px 50px; width: auto; top: auto; transform: none; left: auto; } } 

 <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-10 col-sm-offset-2 text-right"> <img src="https://i.imgur.com/uHoTAhr.png" class="image"> </div> <p class="text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </div> </div> </div> 

Answer 2

Maybe the problem is in the overlapping head in the picture, aside from what Bhuwan mentioned. I see that it is overlapping 9.3% of the whole height of the image so we can use this constraint to calculate the difference from the top.

Considering your original code where you had a 69px top padding, you need to put this line in the .resize() listener:

$(".image").css(
    "top", 
    parseInt($(".box").css("padding-top")) - ($(".image").height() * 0.093)
);