Question

在使用img的{{1}}标记上我尝试启用50％宽度的图片时，点击时会变为100％。使用srcset实现100％宽度，但我也需要更改togggleClass sizes内容。我希望这能确保保持性能以及适当的图像src大小。

ie：点击后，图片会从srcset更改为sizes="(min-width: 29em) 50vw, 100vw"

sizes="100vw"

Answer 1

您可以使用.find()将参数选择器字符串"img"链接到.toggleClass()，.attr("sizes", /* value */)来设置sizes元素的img属性.photo-set元素。

  $(".photo-set").on('click', function() {
    $(this).toggleClass('full-width')
    .find("img").attr("sizes", "(min-width: 29em) 100vw, 100vw")
  });

  .bp2-col-1-2 {
    width: 50%;
  }
  .full-width {
    width: 100% !important;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="photo-set col-1-1 bp2-col-1-2">
    <img src="..." srcset="..."
      sizes="(min-width: 29em) 50vw, 100vw">
</div>

用jquery替换srcset大小

1 个答案: