자바 스크립트는이 코드있어

Question

모든 이미지로드에 크기 조정 :로드 된 모든 이미지에 호출 할

while ($row = mysql_fetch_assoc($result1)) { 
echo " 
<a href='#'id='VV".$row['id']."'> 
<p>".$row['title']."</p> 
<p>".$row['date']."</p> 
<img onload='scale()' id='II".$row['id']."' src='../res/videos/img/".$row['img']."'/> 
</a> 
<script type='text/javascript'> 
function scale(){ 
    var image = document.getElementById('II".$row['id']."'); 
    var width = image.width; 
    var height = image.height; 
    if (width > 150) { 
    image.style.width = '150px'; 
    image.style.height = 'auto'; 
    } 
    width = image.width; 
    height = image.height; 
    if (height > 80) { 
    image.style.height = '80px'; 
    image.style.width = 'auto'; 
    } 
    width = image.width; 
    height = image.height; 
} 
VV".$row['id'].".onclick = function() { 
var Result = '".$row['id']."'; 
location.href='loged.php?Result=' + Result; 
    } 
</script> 
"; 
}?> 

내가 크기 조정 기능을 원하는,하지만 마지막 이미지가로드 될 때 호출되고, 마지막 만 이미지가 적용됩니다. 무엇을 바꾸어야합니까?

Answer 1

150x80 영역에 이미지를 맞추려고합니다. 그렇다면 CSS background-size: contain을 사용하여 스케일링을 수행하는 것이 좋습니다.

while ($row = mysql_fetch_assoc($result1)) 
    echo "<a href='#' id='VV" . $row['id'] . "'>" . 
      "<p>" . $row['title'] . "</p>" . 
      "<p>" . $row['date'] . "</p>" . 
      "<div id='II" . $row[id] . "' " . 
       "style='width: 150px; " . 
         "height: 80px; " . 
         "background: url(../res/videos/img/" . $row['img'] . "); " . 
         "background-size: contain; " . 
         "background-repeat: no-repeat;'>" . 
      "</div>" . 
     "</a>"; 

스타일을 CSS 파일로 추상화하는 것이 좋습니다.

while ($row = mysql_fetch_assoc($result1)) 
    echo "<a href='#' id='VV" . $row['id'] . "'>" . 
      "<p>" . $row['title'] . "</p>" . 
      "<p>" . $row['date'] . "</p>" . 
      "<div id='II" . $row[id] . "' " . 
       "class='my_img_box' " . 
       "style='background: url(../res/videos/img/" . $row['img'] . ");'>" . 
      "</div>" . 
     "</a>"; 

는 브라우저에서 이미지 크기를 조정하지 말아야

div.my_img_box { 
    width: 150px; 
    height: 80px; 
    background-size: contain; 
    background-repeat: no-repeat; 
} 

Answer 2

각 $ 행마다 스크립트를 배치합니다. 나는 자바 스크립트 함수의 사본을 1 개 가질 것이고, 그런 다음 함수에 id를 전달하는 N 번 단일 함수를 호출 할 수있다. 이 방법은 모든 행에서 사용할 수 있습니다. 마지막 (JS 함수의 마지막 복사본은 당신이 발견 한 유일한 호출이 될 것이기 때문에) 마지막이 아닙니다.

간단한 답 : id 매개 변수를 취하여 함수를 페이지에 한 번만 넣으면 함수가 향상됩니다. foreach가 각 id로 함수를 호출 할 수있게한다.