更新子 div 的图像大小，使其不超过父 div

Question

更新子 div 的图像大小，使其不超过父 div

4

我希望能够检测主要图片中的图像大小，如果其高度超过一定值，则将图像设置为特定高度。目前存在问题是它似乎只能检测到第一个图像，并且在通过点击缩略图选择另一个图像时目前不具有响应性。

所有放置在主要图片区域的图像都应该居中显示。

JavaScript代码无法运行，但我认为我正在朝着正确的方向前进。

$('.thumb-box').click(function() {

  $(this).parent('.main-image').attr('src', '.thumb-box > img').fadeIn();

});

//Resize image
  $('.main-image').each(function() {
  if ($(this).height() > 550) { $(this).addClass('higher-than-max'); }
  else if ($(this).height() <= 550) {$(this).addClass('not-higher-than-max');}
});

.parent{
  border:1px solid purple;
  height:100%;
  width:80%;
  float:Right;
}
.child{
  border:1px solid red;
  height:100%;
  background:gray;
  text-align:center;
}
.child-img{
display:inline-block;
max-width:100%;
margin:0 auto;
}
.image-wrapper{
  width:100%;
  background:orange;
}
.thumbnails img{
width:auto;
height:100%;
width:100%;
}
.thumbnails{
  width:100px;
  height:100px;
  
}
.thumb-box{
  height:40%;
  width:40%;
  display:inline-block;
  background:red;
}
.higher-than-max{
  max-height:500px;
  width:auto;
}
.not-higher-than-max{
  max-height:100%;
  width:auto;
}

<div class="parent">
  <div class="child">
  <div class="image-wrapper">
    <img src="http://vignette2.wikia.nocookie.net/pokemon/images/b/b1/025Pikachu_XY_anime_3.png/revision/latest?cb=20140902050035" alt="374x333" class="main-image">
        <div class="thumbnails">
          <div class="thumb-box"> 
          <img src="http://vignette2.wikia.nocookie.net/pokemon/images/b/b1/025Pikachu_XY_anime_3.png/revision/latest?cb=20140902050035" alt="374x333" class="child-img">        </div>
          <div class="thumb-box"> 
          <img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg" alt="800x450" class="child-img"></div>
          <div class="thumb-box">  
          <img src="http://vignette3.wikia.nocookie.net/scratchpad/images/0/02/Pikachu.gif/revision/latest?cb=20150217015901" alt="" class="child-img">
          </div>
          <div class="thumb-box">
                <img src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png" alt="" class="child-img">
          </div>
        </div>
        

  </div>
</div>

- Snorlax

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mi-Creativity · Accepted Answer

你的 .click() 函数存在几个问题：

.main-image 并不是 thumb-box 的父元素，所以你需要使用 parents() ⁽¹⁾ 而不是 parent() 来选择一个更高层级的父元素，然后再导航到大图片——这应该是 parents('.image-wrapper').find('.main-image') 。
.attr('src', '.thumb-box > img') 将会把 字符串 ".thumb-box > img" 插入到大图片的 src 属性中，而不是将 .thumb-box 中图片的源地址插入到大图片的 src 属性中。

请进行如下修改:

JS Fiddle 1

$('.thumb-box').click(function() {

  // grab the src of the image nested in the just clicked tumb-box
  var theSRC = $(this).find('img').attr('src');
  // using parents() we grab the .image-wrapper, then the main-image nested inside it
  // and inject the stored src value of the thumb-box image into the main-image source
  $(this).parents('.image-wrapper').find('.main-image').attr('src', theSRC).fadeIn();

});

针对第二个问题“最大高度为550px”，您可以在CSS中简单地完成，而无需使用javascript中的调整代码，因此请删除不必要的代码⁽²⁾，只需将以下内容添加到CSS中即可⁽³⁾：

JS Fiddle 2

.main-image {
  max-height: 550px;
  width: auto;
}

------------------------------------------------------------------------------

⁽¹⁾ https://api.jquery.com/parents/

⁽²⁾ 除了删除//重置图像$('.main-image').each(...)，还需从您的CSS中删除.higher-than-max和.not-higher-than-max类，因为它们都不需要。

⁽³⁾ 为了更清晰地在fiddle中查看，请将max-height: 550px;更改为250px或300px