我以为 Bootstrap 的缩略图组件会自动拍摄一张图片，并剪切出特定大小的缩略图以贴在网站上。要么我用错了这个功能，要么这完全是错误的。每次我创建 class="thumbnail" 时，我都会得到一个稍微小一点的照片。
作为摄影师，我的照片很大，“缩略图”占据了半页！当然，我可以将 Photoshop 中的所有内容调整为 200X200 像素大小并以缩略图的形式上传，但我觉得必须有更好的方法来做到这一点。
我尝试在 html 本身中将 width="200" 和 height="200" 放在 img src 之后，但这里的问题是，不是从图像中切割出 200X200 的正方形，而是使用按比例缩小图像一维。即，图像适合 200X200 的正方形，但不是填充整个正方形（因为这不是原始比例），而是填充 200X100 类型的区域。
谁能帮忙？
【问题讨论】：
标签： html css ruby-on-rails twitter-bootstrap thumbnails
Bootstrap 不会调整您的图片大小。它是一个 CSS 框架，它只能为你的网页添加样式，但你不能用它来做任何后端工作，比如创建缩略图。在 HTML img 标签中设置尺寸也不会调整图像的大小，它仍然是发送到浏览器的相同图像。因此，为了提高您的网站性能，您需要考虑另一种解决方案，如果您只想以缩略图大小显示它们，您不想通过网络发送巨大的图像。
你在运营什么样的网站？
例如，当您通过媒体管理器上传文件时，Wordpress 会自动处理缩略图的创建。我很确定大多数 CMS 都有这个功能。
如果您有一个没有 CMS 的 PHP 网站，您可以尝试使用诸如 phpthumb 之类的库，不过这需要一些编码。
如果您有一个静态 HTML 网站，那么您别无选择，只能在 Photoshop 中手动调整图像大小。
顺便问一下，你也优化你的图片吗？ （用tinypng或jpeg-optimizer等工具压缩
【讨论】：
我有一些代码可以生成拇指：
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 和其他网站上）。 使用它，您可以在每次添加新图像时生成一个缩略图，然后在缩略图预览中使用此缩略图。
【讨论】：
不，Bootstrap 不会为您调整文件大小。
即使您是网站的唯一用户，您也可以为自己制作文件上传表单。看看Paperclip - 太棒了。并且不要忘记保护此表单以禁止网络用户在您的网站上上传一些丑陋的图片
【讨论】：
Bookstrap 不适用于调整 api 的大小。您可以使用许多可用的图像压缩应用程序。 我会推荐http://shrinkjpeg.com，因为它不会将图像上传到服务器并在浏览器中本地压缩它们。
【讨论】：