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

Question

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

我想实现这样的东西 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 是什么样子，所以很难想出一个有效的“显示原始”功能..但我认为像灯箱或模态这样的东西在你的情况下显示原始图像是最有用的，因为它不会改变您的模板，只是“坐在它上面”。