Question

我想在图像中添加与图像相同宽度的标题。我使用javascript从Get width of specific div and use as another div's height?获取图像的宽度，除了仅适用于单个图像，并且需要我为每个div设置一个单独的ID。有没有更简单的方法？

图像标题由

创建

<img src="myimage.png">
<div class="imgtxt">Caption</div>

<img src="myimage2.png"> <!-- Width set to 80% -->
<div class="imgtxt">Caption2</div> <!-- Div width still at 100% because its the width of the image class -->

，当前的javascript取自上面的链接

var imgWidth = $('img').css('width');
$('.imgtxt').css('width', imgWidth);

Answer 1

您可以尝试以下方法：

$("img").each(function(i){
  var imgWidth = $('img').eq(i).css('width');
  $('.imgtxt').eq(i).css('height', imgWidth);
});

Answer 2

尝试一下：

$('img').each(function() {
    imgWidth = $(this).css('width');
    $(this).next('.imgtxt').css('height', imgWidth);
});

Ps：： jQuery 的.css方法不返回 jQuery对象，因此不提供隐式集合迭代，因此我们需要使用 jQuery 的.each方法显式地遍历集合。

Answer 3

（可选）您可以抓住所有标题，然后从它们导航到图像以设置宽度。

$('.imgtxt').width(function(){
  return $(this).prev('img').css('width');
});

img:nth-of-type(1) {
  min-width: 50px;
  min-height: 25px;
  width: 50px;
  border: 1px solid black;
}

img:nth-of-type(2) {
  min-width: 100px;
  min-height: 80px;
  width: 80px;
  border: 1px solid black;
}

.imgtxt {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="myimage.png">
<div class="imgtxt">Caption</div>

<img src="myimage2.png">
<div class="imgtxt">Caption2</div>

Answer 4

如果您想要不使用javascript的解决方案，则可以尝试向此类图片和标题添加包装器

<div class="img-wrapper" style="display: table">
  <img src="https://via.placeholder.com/250x300">
  <div class="imgtxt">Caption</div>
</div>

然后将包装器样式化为表格。我已经演示了一个示例here。

HTML / js如何从多个不同的图像宽度设置多个div宽度？

4 个答案: