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

【问题标题】：Dynamically change top position on resize调整大小时动态更改顶部位置
【发布时间】：2018-01-16 18:49:16
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

由于.box 容器填充，您正面临问题。删除填充。

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

堆栈片段

.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>

【讨论】：

现在图片太小了，不像盒子的高度。我需要图像的全高。并且列不相等，因此文本要垂直居中。
tnx，但是我在桌面上的图像下方再次有空间，也许我会尝试使用媒体查询或其他东西的第一个解决方案。在移动设备上使用 translateY
@jOE 解决了这个问题！

【解决方案2】：

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

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

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

【讨论】：