设置图片的高度以匹配其旁边文字的高度

Question

我试图将图像的高度设置为相邻文本的高度。

我尝试使用我在问题How to set height of element to match height of another element?的答案中找到的jQuery代码，但是它使图像太大（它的高度高于文本）。

$("#img").css("height", $(".text").height());

img {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="here">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" id="img">
<div class="text">
  <h2>Example</h2>
  <p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example</p>
  <p>Example Example</p>
  <p>Length: 111 min</p>
  <p>Example Example Example</p>
  <p>Example Example Example Example Example Example Example Example Example Example Example</p>
</div>
</div>

手动设置高度是行不通的，因为图像和文本是动态的，这意味着它们可以改变。

JsFiddle：https://jsfiddle.net/y9f0xhm0/

Answer 1

我收到的答案都有我发现的缺陷（例如，如果页面宽度减小，图像会混乱），总的来说，它们过于复杂。

经过一番研究，得到了我合作的朋友的帮助。随着JsFiddle和我发布的后续问题，我有这个代码解决了我如何设置图像的高度与相邻文本相同的问题：

＆＃13;

＆＃13;

$("#here").find('img').css("height", $(".text").outerHeight());

var $img = $("#here").find('img');
$img.on('load', function() {
  $("#here").find('img').css("height", $(".text").outerHeight());
});

window.onresize = function() {
  $("#here").find('img').css("height", $(".text").outerHeight());
}

＆＃13;

img {
  float: left;
}
p:last-of-type {
  margin-bottom: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="here">
  <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" id="img">
  <div class="text">
    <h2>Example</h2>
    <p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example</p>
    <p>Example Example</p>
    <p>Length: 111 min</p>
    <p>Example Example Example</p>
    <p>Example Example Example Example Example Example Example Example Example Example Example</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

JsFiddle：https://jsfiddle.net/f512ejag/2/

Answer 2

您只能以数字方式近似解决方案，因为更改图像的大小将反过来改变文本的高度（因为它具有更多或更少的空间布局），反之亦然（循环依赖性）。甚至不能保证是解决方案。因为如果空间太小，图像和文本不可能具有相同的高度，它只是不适合。在这种情况下，我的解决方案会回退到默认大小。

<div class="image-text">
  <img src="http://www.freesoftware4all.co.uk/wp-content/uploads/2016/08/TSR-Watermark-Image.png" />

  <div class="text"> 
    <p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell example</p>

    <p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell example</p>

    <p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell example</p>    
  </div>
</div>

var containerElement = document.querySelector('.image-text');
var textElement = document.querySelector('.text');
var imageElement = document.querySelector('img');

//Cancel approximation when the height difference is less than DELTA.
var DELTA = 1;

var adjustImageHeight = function() {
  while(Math.abs(textElement.offsetHeight - imageElement.offsetHeight) > DELTA) {
    imageElement.style.height = ((imageElement.offsetHeight + textElement.offsetHeight) / 2) + 'px';    

    //Image grows larger than container, reset its size.
    if(imageElement.offsetWidth > containerElement.offsetWidth) {
      imageElement.style.height = 'auto';
      return;
    }
  }  
};

window.addEventListener('resize', adjustImageHeight);
adjustImageHeight();

http://jsbin.com/ganakorake/edit?html,css,js,output

Answer 3

您需要将所有p的高度相加，并将其设置为img的高度。我使用.each()迭代p elementx并在变量中设置它们的高度。

var height = 0;
$("p").each(function(){
  height += $(this).height();
});
$("img").height(height);

＆＃13;

＆＃13;

var height = 0;
$("p").each(function(){
  height += $(this).height();
});
$("img").height(height);

＆＃13;

img { float: left; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.freesoftware4all.co.uk/wp-content/uploads/2016/08/TSR-Watermark-Image.png" />
<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>
<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>
<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>

＆＃13;

＆＃13;

＆＃13;

但它没有考虑段落的余量。 另一种方法是使用.offset()像底部代码获取文本的高度。

var topPos = $("p:first").offset().top;
var bottomPos = $("p:last").offset().top;
$("img").height(bottomPos - topPos);

＆＃13;

＆＃13;

var topPos = $("p:first").offset().top;
var bottomPos = $("p:last").offset().top;
$("img").height(bottomPos - topPos);

＆＃13;

img { float: left; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.freesoftware4all.co.uk/wp-content/uploads/2016/08/TSR-Watermark-Image.png" />
<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>
<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>
<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>

＆＃13;

＆＃13;

＆＃13;

Answer 4

var left= $("#leftdiv").height();

var yourImg = document.getElementById('rightdiv');
if(yourImg && yourImg.style) {
    yourImg.style.height = left+"px";
    yourImg.style.width = left+"px";
}

img {
  float: left;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://www.freesoftware4all.co.uk/wp-content/uploads/2016/08/TSR-Watermark-Image.png" id="rightdiv"  style="float:right;max-width:50%"/>

<div id="leftdiv"  style="float:right;max-width:50%">
<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>

<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>

<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>
</div>

Answer 5

除此之外，我还没有找到更好的解决方案。

$("#img").css("height", $(".text").height());
setTimeout(function() {
    $("#img").css("height", $(".text").height());
}, 0)

我也认为你可以得到一个线索，为什么它不能准确地完成。当图像调整大小时文本也会调整大小，然后图像再次需要调整大小和... ..

您可以运行代码段或查看fiddle。

＆＃13;

＆＃13;

$("#img").css("height", $(".text").height());
setTimeout(function() {
  $("#img").css("height", $(".text").height());
}, 0)

＆＃13;

img {
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" id="img">
<div class="text">
  <h2>Example</h2>
  <p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example</p>
  <p>Example Example</p>
  <p>Length: 111 min</p>
  <p>Example Example Example</p>
  <p>Example Example Example Example Example Example Example Example Example Example Example</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

这是一个使用jQuery的简单解决方案。

＆＃13;

＆＃13;

var h = $(".text").height();
  $("#img1").height(h);

＆＃13;

img {
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="here">

<div class="text">
  <img id ="img1" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" id="img">
  <h2>Example</h2>
  <p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example</p>
  <p>Example Example</p>
  <p>Length: 111 min</p>
  <p>Example Example Example</p>
  <p>Example Example Example Example Example Example Example Example Example Example Example</p>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

工作演示：http://codepen.io/shalineesingh/pen/NdzQqE