srcset 크기 onclick을 jquery로 바꾸십시오.

Question

을 사용하는 img 태그에서 클릭 할 때 50 % 너비 이미지를 100 %로 만들려고합니다. 너비가 togggleClass 일 때 100 % 너비가 달성되지만 콘텐츠가 srcset이어야합니다. 나는 이것이 적절한 이미지 src 크기와 함께 성능을 유지할 수 있기를 희망한다.

예 : 클릭하면, sizes="100vw"

<div class="photo-set col-1-1 bp2-col-1-2"> 
    <img src="..." srcset="..." 
     sizes="(min-width: 29em) 50vw, 100vw"> 
</div> 

<script> 
    $(".photo-set").on('click', function() { 
    $(this).toggleClass('full-width'); 
    }); 
</script> 
<style> 
    .bp2-col-1-2 { 
    width: 50%; 
    } 
    .full-width { 
    width: 100% !important; 
    } 
</style> 

Answer 1

-sizes="(min-width: 29em) 50vw, 100vw"에서 이미지 변경 당신은 .photo-set 요소 내에 img 요소의 sizes 속성을 설정하는 .toggleClass()에 체인 매개 변수를 선택 문자열 "img", .attr("sizes", /* value */)와 .find()를 사용할 수 있습니다.

$(".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>