Question

我正在尝试调整窗口大小以更改图像顶部的位置，以便将图像放入框中，因为它在调整大小时会发生变化并且图像在外面变得太大。我不确定我是否需要盒子和图像的高度然后用位置顶部做一些事情。

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

由于您的.box容器填充，您遇到了问题。删除填充。

我还建议您使用转换调整图片并将内容包装在<p>标记中，并使用position:absolute将其设置为中心。对于内容的响应集position:relative。我还对HTML标记进行了一些更改。

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

除了Bhuwan所提到的，可能问题出现在图片的重叠中。我看到它与图像整个高度的9.3％重叠，所以我们可以使用这个约束来计算与顶部的差异。

考虑到原始代码中有69px的顶部填充，您需要将此行放在.resize()侦听器中：

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

在调整大小时动态更改顶部位置

2 个答案: