html - Twitter Bootstrap Image Gallery - 创建自动缩略图

Question

我以为 Bootstrap 的缩略图组件会自动拍摄图像，并剪切出特定大小的缩略图以在网站上打耳光。要么我错误地使用了这个功能，要么这完全是错误的。每次我创建 class="thumbnail"时，我只会得到一个稍微小一点的照片。

作为一名摄影师，我的照片很大，“缩略图”占了半页!当然，我可以将 Photoshop 中的所有内容调整为 200X200 像素大小，并将它们作为缩略图上传，但我觉得必须有更好的方法来做到这一点。

我尝试在 html 本身中将 width="200"和 height="200"放在 img src 之后，但这里的问题是不是从图像中切割出 200X200 的正方形，而是按比例缩小图像使用一维。即，图像适合 200X200 的正方形，但不是填满整个正方形(因为这不是原始比例)，而是填满 200X100 的文字区域。

有人能帮忙吗？

Answer 1

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

您运营的是哪种网站？

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

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

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

顺便问一下，你也优化你的图片吗？ (使用 tinypng 或 jpeg-optimizer 等工具压缩