html - 使用 css/html/php/jquery 调整图像大小并提供显示原始选项

Question

在我的网站模板中，我想放置一个图像代码，将宽度大于 910 像素的图像重新调整为 910 像素，但保留宽度小于 910 像素的图像。如果调整图像大小，它应该提供一个显示原始图像选项。

我想实现这样的东西 http://www.mangareader.net/94-8-3/bleach/chapter-1.html

这是我目前的代码:

HTML:

<img src="http://localhost/manga2anime/upload/Bleach/1/03.png" class="resize">

CSS:

.resize {
    max-width: 910px;
    max-height : auto;
}

Answer 1

最简单的方法是将 img 的宽度也存储在数据库中。如果是这样的话，可以这样做:

<?php
   // Connect to DB etc.

   $result = mysql_query("SELECT 'img_path', 'width' FROM table");

   if(mysql_row_count($result) != 0){
       while($row = mysql_fetch_array($result)){
            $img = "<img src='" . $row['img_path'] . "'";
            if($row['width'] > 910){
                $img .= " class='resize'";
                // OR
                // $img .= " width='910'";
                echo "<a onclick='showOriginal()'>Show Original</a>";
            }
            $img .= " >";
            echo $img;
       }
   }else{
       echo "No images found.";
   }
?>

如果 img 已经加载并且您的 php 不是那么方便，您也可以使用 jQuery 对其进行调整:

function adjustImage(){
   if($('img#needed_img').width() > 910){
       $(this).addClass('resize');
       // OR
       // $(this).attr('width', '910');
       $('#show_original_button').show();
   }
}

并且仅在文档加载时调用上述函数(因此不与 jQuery 就绪函数结合使用)。我不知道你的 HTML 是什么样子，所以也很难想出一个有效的“显示原始”功能..但我认为像灯箱或模态这样的东西在你的情况下对显示原始 img 最有用，因为它不会改变您的模板，只是“坐在上面”。