Question

我认为Bootstrap的缩略图组件会自动拍摄一张图像，并在网站上剪切特定尺寸的缩略图。要么我使用此功能错误，要么完全错误。每当我创建class =“thumbnail”时，我只会得到一个稍微小一点的照片。

作为一名摄影师，我的照片非常庞大，而且“缩略图”占据了整个页面的一半！当然，我可以将Photoshop中的所有内容调整为200X200px大小，并将其作为缩略图上传，但我觉得必须有一种更好的方法。

我尝试在html本身只是在img src之后放置width =“200”和height =“200”，但这里的问题是，不是从图像中切出200X200的正方形，而是按比例缩小图像一个维度。即，图像适合200X200的正方形，但不是填满整个正方形（因为这不是原始比例），它填满了200X100型区域。

有人可以帮忙吗？

Answer 1

Bootstrap不会调整图像大小。它是一个CSS框架，它只能为您的网页添加样式，但您无法使用它来执行任何后端工作，例如缩略图创建。在HTML img标记中设置尺寸也不会调整图像大小，它仍然是发送到浏览器的相同图像。因此，为了提高您的网站性能，您需要考虑另一种解决方案，如果您只是以缩略图大小显示它们，则不希望通过网络发送大量图像。

您在运营什么类型的网站？

例如，当您通过媒体管理器上传文件时，Wordpress会自动处理缩略图创建。我很确定大多数CMS都具有此功能。

如果您的PHP网站没有CMS，您可以尝试使用phpthumb之类的库，但这需要一些编码。

如果您有一个静态HTML网站，那么除了在Photoshop中手动调整图像大小外别无选择。

顺便问一下，你也优化你的图像吗？（使用tinypng或jpeg-optimizer

等工具进行压缩

Answer 2

我有一些代码来生成拇指：

public function generateThumb($pathToImage, $pathToThumb, $extension, $maxDim)
    {
        //Create a new image according to "MimeType"
        switch($extension){
            case "gif":
                $img = imagecreatefromgif("{$pathToImage}");
                break;
            case "jpeg":
                $img = imagecreatefromjpeg("{$pathToImage}");
                break;
            case "png":
                $img = imagecreatefrompng("{$pathToImage}");
                break;
        }
        // load image and get image size
        $width = imagesx($img);
        $height = imagesy($img);

        // calculate thumbnail size, vertical and horizontal orientation
        $new_width = ($width > $height) ? $maxDim : floor($width * ( $maxDim / $height ));
        $new_height = ($height > $width) ? $maxDim : floor($height * ( $maxDim / $width ));

        // create a new temporary image
        $tmp_img = imagecreatetruecolor($new_width, $new_height);

        // copy and resize old image into new image
        imagecopyresized($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
        // save thumbnail into a file
        imagejpeg($tmp_img, "{$pathToThumb}");
    }

对不起，但我不记得我在哪里找到原始剧本（在SO和其他网站上）。使用它，您可以在每次添加新图像时生成拇指，然后在缩略图预览中使用此拇指。

Answer 3

Nop，Bootstrap不会为你重新调整文件大小。

即使您是网站的唯一用户，您也可以自己制作文件上传表单。看看Paperclip - 真棒。并且不要忘记保护此表单以禁止网络用户在您的网站上上传一些丑陋的图像

Answer 4

Bookstrap不适用于调整api的大小。您可以使用许多可用的图像压缩应用程序。我建议http://shrinkjpeg.com，因为它不会将图像上传到服务器并在浏览器中本地压缩它们。

Twitter Bootstrap图库 - 创建自动缩略图

4 个答案: