0

我网站上的所有图像都包含在 div 中，因此我可以在它们之上添加图像悬停效果的蒙版。现在我需要将图像的宽度添加到其周围的 div 中。

那是我的 HTML：

<div class="imagecontainer">
  <a href="/abc.php">
    <div class="imagebackicon"></div> <!-- ignore, its only for the image mask -->
    <div class="imagebackground"></div> <!-- ignore, its only for the image mask -->
    <img src="image.jpg" width="300" height="200" />
  </a>
</div>

我想将“300”的图像宽度添加到其周围的 div 中。我通过这样做来做到这一点：

$('.imagecontainer').width($(".imagecontainer").find('img').attr("width"));

问题是，这段代码将第一个图像的宽度添加到我周围的所有图像 div 中。只要所有图像都具有相同的大小，这很好，但它们没有。

如果有人知道我如何将图像宽度仅添加到其周围的 div，而不是所有图像 div，那就太好了。

4

2 回答 2

1

要对所有图像/容器执行此操作，您需要迭代：

$('img').each(function(i, elem) {
    $(elem).closest('.imagecontainer').width($(elem).attr('width'));
});

或相反：

$('.imagecontainer').each(function(i, elem) {
    $(this).width( $(this).find('img').attr('width') );
});
于 2013-01-25T09:29:30.320 回答
0

div另一种方法是首先使用相应值的数组将宽度应用于容器，然后设置img为width:100%;

JS：

var img = [100,300,200,600]; 
$(".imagecontainer").each(function(i){
$(this).width(img[i]);
});

（如果 div 是在服务器端通过循环动态生成的，您可以考虑使用内联样式来设置从服务器接收到的 HTML 的容器宽度）

CSS：

img {
    width:100%;
}
于 2013-01-25T09:46:32.827 回答