Prestashop 테마 및 모듈을 편집하여 이미지 자동 크기 조정

Question

모듈에서 tpl 파일을 변경해야합니다. 화면 해상도에 따라 이미지 크기를 변경하는 데 문제가 있습니다. 다음 코드는 페이지를 새로 고칠 때까지 항상 완벽하게 표시되지는 않습니다. 어떻게이 과정을 부드럽게 할 수 있습니까? 당신이 어떤 CSS 나 자바 스크립트 인라인을 사용하는 경우

<script type="text/javascript" src="../../img/jquery.min.js"></script> 
<script type="text/javascript" src="img/jquery.cycle.all.latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').cycle({ 
      fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle,  etc... 
    }); 
    $('.slideshow1').cycle({ 
      fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
    }); 
    $('.slideshow2').cycle({ 
      fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
    }); 
}); 
</script> 

CSS

<style type="text/css"> 
    .slideshow { height:100%; width: 290px; float:left; margin:20px 8px 0px 0px;  padding:0px;} 
    .slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee;     margin:0px; padding:0px; width:290px; float:left;} 

    /*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/ 
    .slideshow1 { height:100%; width: 290px; padding:0px; float:left;margin:20px 0px 0px 0px; } 
    .slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:left; } 

    /*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/ 
    .slideshow2 { height:100%; width: 290px; float:right; margin:20px 0px 0px 0px; } 
    .slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:right; } 

    {literal} 
    @media only screen and (min-width: 1218px) { 

    .slideshow { height:100%; width: 290px; float:left; margin:20px 8px 0px 0px; padding:0px;} 
    .slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:left;} 

    /*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/ 
    .slideshow1 { height:100%; width: 290px; padding:0px; float:left;margin:20px 0px 0px 0px; } 
    .slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:left; } 


    /*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/ 
    .slideshow2 { height:100%; width: 290px; float:right; margin:20px 0px 0px 0px; } 
    .slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; width:290px; float:right; } 
    } 

    @media only screen and (min-width: 998px) and (max-width: 1217px) { 
    .slideshow { height:100%; width: 238px; float:left; margin:20px 8px 0px 0px; padding:0px;} 

    .slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px;} 

    .slideshow1 { height:100%; width: 238px; padding:0px; float:left;margin:20px 0px 0px 0px; } 

    /*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/ 

    .slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; } 

    .slideshow2 { height:100%; width: 238px; float:right; margin:20px 0px 0px 0px; } 

    /*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/ 

    .slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:0px; padding:0px; } 
    } 

    @media only screen and (min-width: 768px) and (max-width: 997px) { 
    .slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee; float:left; padding:0px; width:225px; margin:auto;} 


    /*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/ 
    .slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; padding:0px; width:225px; float:left; margin:auto; } 


    /*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/ 
    .slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; padding:0px; width:225px; float:left; margin:auto; } 
    } 

    @media only screen and (min-width: 480px) and (max-width: 767px) { 

    .slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee; padding:0px; width:140px;} 


    /*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/ 

    .slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; padding:0px; width:140px; } 


    /*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/ 

    .slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; padding:0px; width:140px; } 
} 


    @media only screen and (max-width: 479px) { 

    .slideshow img { padding: 3px; border: 3px solid #ccc; background-color: #eee; padding:0px; width:100%; text-align:center;} 


    /*.slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 0px; padding:0px; }*/ 

    .slideshow1 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; padding:0px; width:100%; text-align:center; } 


    /*.slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee; margin:20px 0px 0px 20px; padding:0px; }*/ 

    .slideshow2 img { padding: 3px; border: 3px solid #ccc; background-color: #eee;margin-left:-8px; padding:0px; width:100%; text-align:center; } 
    } 

    {/literal} 
    </style> 

HTML

<div class="slideshow"> 
     <a href="#"><img src="img/earrings_011.jpg" ></a> 
     <a href="#"><img src="img/earrings_044.jpg"/></a> 
     <a href="#"><img src="img/earrings_033.jpg"></a> 

</div> 

<div class="slideshow1" > 
     <a href="#"><img src="img/bracelets_011.jpg" /></a> 
     <a href="#"><img src="img/bracelets_022.jpg" /></a> 
     <a href="#"> <img src="img/bracelets_033.jpg" /></a> 
</div> 

<div class="slideshow2"> 
<a href="#"><img src="img/necklaces_01.jpg" /></a> 
<a href="#"><img src="img/necklaces_02.jpg"/></a> 
<a href="#"><img src="img/necklaces_03.jpg"/></a> 
</div> 

Answer 1

는 {literal}{/literal} 태그로 묶습니다. 이것은 Smarty가 대괄호 { }을 사용할 때와 구별됩니다.