天道酬勤,学无止境

具有不同图像大小的缩略图 Bootstrap(Have Thumbnails with different images sizes Bootstrap)

问题

我想要具有不同大小和不同文本数量的图像的缩略图。 但我希望它们都具有相同的尺寸。 就像 Bootstrap 网站上的这个例子一样。

下面是我目前的代码,在 jsFiddle 上有一个演示。

我有不同的图像大小,所以这会坏掉。 这可以用 Bootstrap 实现吗?

<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <h3>
            Fading a RGB LED on BeagleBone Black
        </h3><img src="https://learn.adafruit.com/system/guides/images/000/000/322/medium310/overview_web.jpg?" alt="Sample Image">
        <div class="caption">
            <p>In this tutorial, you will learn how to control the color of an RGB LED using a BeagleBone Black and Python.</p>
        </div>
    </div>
</div>
<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <h3>
            Measuring Light with a BeagleBone Black
        </h3><img src="https://learn.adafruit.com/system/guides/images/000/000/316/medium310/overview_web.jpg?" alt="Sample Image">
        <div class="caption">
            <p>In this tutorial, you will learn how to connect a photoresistor to a BeagleBone Black. The tutorial can also be used for other resistive sensors such as FSRs or SoftPots.</p>
        </div>
    </div>
</div>
回答1

您可以通过定义容器的尺寸来实现这一点。

例如在你的容器元素(.thumbnail)中,设置一个特定的尺寸如下:

.thumbnail{        
    width: 300px; 
    // or you could use percentage values for responsive layout
    // width : 100%;
    height: 500px;
    overflow: auto;
}

.thumbnail img{
    // your styles for the image
    width: 100%;
    height: auto;
    display: block;
}

等等与其他元素。

样本

回答2

您可以使用img标签上的 CSS 来完成此操作。

img {
    width: 200px;
    height: 200px;
}

或者像这样在每个img标签上内联

<img style="width: 200px; height: 200px" src="https://learn.adafruit.com/system/guides/images/000/000/339/medium310/overview_web.jpg" alt="Sample Image">
回答3

您应该设置这些列的高度。 在示例中,我们有相同数量的文本,因此每个 div 的高度都相同。

回答4

这是我的解决方案,希望对您有所帮助!

  <style type="text/css">
  .row{
    display: flex;
   flex-wrap: wrap;
  }
  .row>[class="col-sm-6 col-md-4"]{
    display: flex;
    flex-direction: column;
  }
</style>

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 使用 ImageMagick 高效生成缩略图并转换(Efficiently generating thumbnails with ImageMagick and convert)
    问题 我希望使用 Python 中的 ImageMagick 转换实用程序有效地生成各种大小的缩略图。 我的一些图像文件非常大(约 15MB JPG)。 我可以做到的一种方法是获取全尺寸图像,并从全尺寸图像生成各种缩略图,如下所示: convert sample_image.jpg -resize 1024x768 sample_image-1024x768.jpg convert sample_image.jpg -resize 800x600 sample_image-800x600.jpg convert sample_image.jpg -resize 400x300 sample_image-400x300.jpg convert sample_image.jpg -resize 200x150 sample_image-200x150.jpg 但另一种方法是调整彼此的图像大小: convert sample_image.jpg -resize 1024x768 sample_image-1024x768.jpg convert sample_image-1024x768.jpg -resize 800x600 sample_image-800x600.jpg convert sample_image-800x600.jpg -resize 400x300 sample
  • 删除YouTube缩略图上的黑色边框4:3(Removing black borders 4:3 on youtube thumbnails)
    问题 例如,我有一个链接 http://img.youtube.com/vi/aOPGepdbfpo/0.jpg 对于youtube视频缩略图: 我想删除黑色的顶部和底部边框,所以我得到这样的图片: 可以使用PHP函数javascript / jQuery或youtube api本身来完成吗? 回答1 将其用作背景图像,将其居中并更改高度。 http://dabblet.com/gist/4012604 .youtubePreview { background:url('http://img.youtube.com/vi/aOPGepdbfpo/0.jpg') center no-repeat; height:204px; width:480px; } 回答2 YouTube提供的图像没有比例为4:3的黑色条纹。 要获得没有黑条的16:9视频缩略图,请尝试以下方法之一: http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg 第一个mqdefault为320x180像素的图像。 第二个maxresdefault为1500x900像素的图像
  • 如何加载引导程序缩略图(How to load bootstrap thumbnail images)
    问题 我已经开始在一个项目中使用 Bootstrap,特别是 Thumbnails 组件。 在文档的缩略图示例中,显示了以下示例代码: <ul class="thumbnails"> <li class="span4"> <a href="#" class="thumbnail"> <img data-src="holder.js/300x200" alt=""> </a> </li> ... </ul> 请注意使用data-src来替换<img>标签上的常用src属性。 我假设要让我的缩略图工作,我应该对图像使用data-src而不是src ,但情况似乎并非如此。 我只能通过定义src属性来加载图像。 似乎其他人也有同样的问题。 这是文档中的错字,还是我没有正确理解如何使用data-src ? 回答1 我相信引导人员使用data-src而不是src的唯一原因,是因为holder.js 。 您应该使用src而不是data-src因为data-src仅用于生成特定大小示例图像的 javascript 库,而src是用于指定图像位置的普通属性(来源:W3C) 为什么他们在文档data-src ? 我想即使语法<img src="holder.js/100x200"></img>也被库接受,就像在 holder.js 文档中一样,当我们访问该页面时,它会在图像即使在显示图像时
  • 如何用PHP制作缩略图(how to make thumbnails with php)
    问题 我只是想知道如何制作存储在hdd中的图像的缩略图并在html页面中使用它们,如果最好在同一页面的div标签中单击,我还需要缩略图能够放大(至其原始大小) ,如果有人能让我朝正确的方向前进,我将不胜感激 谢谢 回答1 您将需要启用GD扩展。 以下代码将在名为~tmb的子目录中为JPEG,PNG和GIF文件创建缩略图文件: $invalid = true; if ($file != '.' and $file != '..') { if (filetype($path_abs.$file) == "file") { $ext = strtolower(substr($file,strrpos($file,'.')+1)); if ($ext == 'jpg' || $ext == 'jpeg') { $origimg = @imagecreatefromjpeg($path_abs.$file); } elseif ($ext == 'png') { $origimg = @imagecreatefrompng($path_abs.$file); } elseif ($ext == 'gif') { $origimg = @imagecreatefromgif($path_abs.$file); } if ($origimg !== false) { $nheight = 0;
  • 如何使用Java调整图像大小?(How can I resize an image using Java?)
    问题 我需要调整PNG,JPEG和GIF文件的大小。 如何使用Java做到这一点? 回答1 加载图像后,您可以尝试: BufferedImage createResizedCopy(Image originalImage, int scaledWidth, int scaledHeight, boolean preserveAlpha) { System.out.println("resizing..."); int imageType = preserveAlpha ? BufferedImage.TYPE_INT_RGB : BufferedImage.TYPE_INT_ARGB; BufferedImage scaledBI = new BufferedImage(scaledWidth, scaledHeight, imageType); Graphics2D g = scaledBI.createGraphics(); if (preserveAlpha) { g.setComposite(AlphaComposite.Src); } g.drawImage(originalImage, 0, 0, scaledWidth, scaledHeight, null); g.dispose(); return scaledBI; } 回答2 我刚刚发布了FWIW(Apache
  • 如何在Wordpress中调整大小/访问原始图像?(How do I resize/access original images in wordpress?)
    问题 图像在wordpress中的哪里调整大小? 在数据库中? 在文件夹中? 我将如何调整原始图像的大小(而不创建新版本)。 我之所以这么问,是因为我在Wordpress网站上上传了很多图片,这些图片太大且加载速度变慢,并且我想调整它们的大小,以便没有任何大于1500px的尺寸。 我已经看过一些插件,包括“重新生成缩略图”,但是可能有一个确实可以实现我尚未找到的插件。 回答1 好了,图像“即时”调整大小,然后存储在服务器中,其信息记录在数据库中。 原始遗迹和所有“缩略图”均已生成。 在这种情况下,“缩略图”是指所有WP生成的图像大小,无论大小。 我在WordPress StackExchange上回答了相同的问题。 解决方案来自本文:如何自动使用调整大小的图像代替原始图像。 此脚本将用WordPress生成的大图像替换上载的图像(如果大于设置中定义的较大尺寸),以节省服务器空间,如果将缩略图链接到原始图像(如灯箱),则可以节省带宽。使用了插件。 add_filter('wp_generate_attachment_metadata','replace_uploaded_image'); function replace_uploaded_image($image_data) { // if there is no large image : return if ( !isset(
  • 唯一缩略图不创建缩略图(sorl-thumbnail not creating thumbnails)
    问题 我在使用sorl-thumbnail遇到了一些困难。 我的模板如下: {% thumbnail project.image "75x75" crop="center" as im %} <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"> {% empty %} <p>:(</p> {% endthumbnail %} 在渲染的网页中,我得到了缩略图的以下路径: <img src="/media/cache/ff/29/ff299c50543aa807b0fbd28faf271e63.jpg" width="75" height="75"> 现在这一切都说得通了,因为我的MEDIA_URL设置为/media/ ,它在我的Apache httpd.conf映射到服务器上的本地文件夹。 问题在于服务器上不存在此路径,因此图像显示为断开的链接。 值得注意的是,我正在使用自定义存储对象,尽管这不应该影响任何事情,因为它直接通过sorl.thumbnail ImageField传递。 另外,我正在使用在服务器上运行的memcached缓存后端。 令人讨厌的是,即使我启用了THUMBNAIL_DEBUG和DEBUG ,也没有收到任何错误,因此很难看到出了什么问题。
  • 不知道如何使用 Bootstrap 缩略图组件(Can't figure out how to use Bootstrap thumbnail component)
    问题 我正在尝试使用 Bootstrap 的缩略图组件来显示带有缩略图的产品类别列表。 我希望用户单击缩略图转到该类别。 Bootstrap 网站上的文档提供了以下基本标记: <ul class="thumbnails"> <li class="span4"> <a href="#" class="thumbnail"> <img data-src="holder.js/300x200" alt=""> </a> </li> ... </ul> 我在谷歌上搜索了有关 holder.js 的信息,找到了官方的 holder.js 页面,下载了 zip 版本,将文件放在我网站的 js 文件夹中,并在我的 HTML 中使用脚本标签链接到 holder.js 文件。 但是如何/在标记中的何处指定要使用的图像文件? 我还需要在每个图像下包含一个类别名称,可能带有 span 或 h4 标签。 这将需要形成可点击块的一部分。 更新:澄清一下,我想使用的实际上只是缩略图组件的样式方面。 所以也许我可以使用缩略图组件和相关的 HTML 标记来实现这一点,而完全不考虑 holder.js? 这是我想使用的那种 HTML 标记: <ul class="thumbnails"> <li class="span4"> <a href="/category-name/" class="thumbnail">
  • 每个项目中具有不同高度的Bootstrap 3网格-仅使用CSS即可解决吗?(Bootstrap 3 grid with different height in each item - is it solvable using only CSS?)
    问题 我正在尝试制作一个缩略图网格,其中每个缩略图都有一个图像和一个标签。 如果所有标签的长度都相同,则效果很好,因为所有缩略图的高度都相同: http://www.bootply.com/iSqwWyx5ms 但是,如果我缩短最右边的缩略图的文本,则下面的部分行将被压入新行,如下所示: http://www.bootply.com/Wqd021aaeM 我想要的是第二行从第一行结束的最低点开始。 我知道我可以使用JavaScript来解决-在每一行中找到最长的缩略图,然后将其他缩略图设置为具有该高度。 问题是,仅使用CSS,我有什么方法可以解决我的问题吗? 更新:我事先不知道一行中有多少个项目。 例如,在一个小屏幕上,我将连续放置2个项目,而在大屏幕上,它将是3个,因此设置何时开始新行的解决方案对我来说并不好。 回答1 您应该使用.clearfix ,如Bootstrap文档的“网格响应式重置”部分所述:https: .clearfix 回答2 如果您不知道自己有多少列,则可以执行以下操作: .row.fix { display: flex; flex-wrap: wrap; width:100%; /*not always necessary*/ } 工作提琴: https : //jsfiddle.net/wqdm1jjt/ 例子: 作者:胡安·米格尔(Juan Miguel
  • JNI - 在 Java 和本机代码之间传递大量数据(JNI - Passing large amounts of data between Java and Native code)
    问题 我正在努力实现以下目标: 1) 我在 java 端有一个字节数组来表示一个图像。 2)我需要让我的本机代码访问它。 3) 本机代码使用GraphicsMagick 解码此图像并通过调用resize 创建一堆缩略图。 它还计算图像的感知哈希,它是向量或 unint8_t 数组。 4) 一旦我将此数据返回给 Java 端,不同的线程将读取它。 缩略图将通过 HTTP 上传到某些外部存储服务。 我的问题是: 1) 将字节从 Java 传递到我的本机代码的最有效方法是什么? 我可以以字节数组的形式访问它。 我没有看到将它作为字节缓冲区(包装这个字节数组)与这里的字节数组传递的任何特别优势。 2)将这些缩略图和感知散列返回给java代码的最佳方法是什么? 我想到了几个选择: (i) 我可以在 Java 中分配一个字节缓冲区,然后将它传递给我的本地方法。 然后本机方法可以写入它并在完成后设置限制并返回写入的字节数或一些指示成功的布尔值。 然后,我可以对字节缓冲区进行切片和切块,以提取不同的缩略图和感知哈希,并将其传递给将上传缩略图的不同线程。 这种方法的问题是我不知道要分配什么大小。 所需的大小取决于生成的缩略图的大小(我事先不知道)和缩略图的数量(我事先知道)。 (ii) 一旦我知道所需的大小,我也可以在本机代码中分配字节缓冲区。 我可以根据我的自定义打包协议将我的 blob
  • Twitter Bootstrap - 多个图像(缩略图)轮播 - 一次移动一个缩略图(Twitter Bootstrap - multiple image (thumbnail) carousel - move thumbnails one at a time)
    问题 我正在尝试 Twitter bootstrap 3。我对 HTML、CSS 和 Javascript 还很陌生。 我有一个我创建的旋转木马,它的代码如下所示: <div class="container"> <div id="myCarousel2" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> <div class="item active"> <div class="row text-center"> <!-- ITEM--> <div class="col-md-3"> <div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a> </div> </div> <!-- ITEM--> <!-- ITEM--> <div class="col-md-3"> <div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static
  • Bootstrap 3.0中带有缩略图的轮播(Carousel with Thumbnails in Bootstrap 3.0)
    问题 我需要制作Bootstrap 3.0 Carousel来显示缩略图的幻灯片。 我怎样才能做到这一点? 这是我正在寻找的图像: 这是Bootstrap 2的有效示例,但对于Bootstrap 3.0,则需要此示例。:Bootstrap缩略图滑块 回答1 Bootstrap 4(2019年更新) 如此处所述,多项目轮播可以通过几种方式完成。 另一种选择是使用单独的缩略图浏览轮播幻灯片。 Bootstrap 3(原始答案) 可以使用每个轮播项目内部的网格来完成此操作。 <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-sm-3">.. </div> <div class="col-sm-3">.. </div> <div class="col-sm-3">.. </div> <div class="col-sm-3">.. </div> </div> <!--/row--> </div> ...add more item(s) </div> </div> 使用轮播的演示示例缩略图滑块: http://www.bootply.com/81478
  • 在PHP中裁剪图像(Crop image in PHP)
    问题 下面的代码可以很好地裁剪图像,这是我想要的,但是对于较大的图像,它也可以正常工作。 有什么办法可以缩小图像吗? 理想情况下,我可以在裁剪之前使每个图像的大小大致相同,以便每次都能获得良好的效果 代码是 <?php $image = $_GET['src']; // the image to crop $dest_image = 'images/cropped_whatever.jpg'; // make sure the directory is writeable $img = imagecreatetruecolor('200','150'); $org_img = imagecreatefromjpeg($image); $ims = getimagesize($image); imagecopy($img,$org_img, 0, 0, 20, 20, 200, 150); imagejpeg($img,$dest_image,90); imagedestroy($img); echo '<img src="'.$dest_image.'" ><p>'; 回答1 如果尝试生成缩略图,则必须首先使用imagecopyresampled();调整图像的大小imagecopyresampled(); 。 您必须调整图像的大小,以使图像较小侧的大小等于拇指的相应侧。 例如
  • 永久链接到Google Drive API中的缩略图(Permanent links to thumbnails in Google Drive API)
    问题 我正在使用Google Drive API(PHP)将一些照片上传到我的云端硬盘。 上传文件后,响应Google_DriveFile返回Google_DriveFile对象,以确认传输成功。 它包含一个名为thumbnailLink的字段,可通过getThumbnailLink getter访问。 其内容可能如下所示: https://lh4.googleusercontent.com/dqVdU195R4_0ZtWxsJlhW1Fr2K30xa2hH3V1KV4UrTBl9QkhOSR0ZqN9HoB-TjEQv8SIJw=s220 直到今天,我确信链接不会随着时间的流逝而改变。 但是,当我尝试使用保存在本地数据库中的缓存地址来显示云端硬盘上的照片缩略图时,出现403错误-您可以在上述链接下看到它。 我向API请求了指向缩略图的当前链接,现在它已经完全不同了。 它只发生了一次,但是发生了多个文件,即我在云端硬盘上拥有的所有文件突然都获得了新的缩略图链接。 有没有一种方法可以通过某个恒定值快速检索文档(最好是照片)的缩略图,或者确保它不会改变? 完美的解决方案是访问包含文档id的链接下的缩略图,而不是可能会更改的某些哈希值。 回答1 试试这个: https://drive.google.com/thumbnail?authuser=0&sz=w320&id=[fileid]
  • 调整大小时使用PIL保留图像的exif数据(创建缩略图)(Preserve exif data of image with PIL when resize(create thumbnail))
    问题 当我尝试使用PIL调整图像大小(缩略图)时,exif数据会丢失。 我该怎么做才能将exif数据保留在缩略图中? 当我搜索相同的内容时,获得了一些链接,但似乎没有任何作用。 from PIL import Image import StringIO file_path = '/home/me/img/a.JPG' im = Image.open( file_path) THUMB_SIZES = [(512, 512)] for thumbnail_size in THUMB_SIZES: im.thumbnail( thumbnail_size, Image.ANTIALIAS) thumbnail_buf_string = StringIO.StringIO() im.save('512_' + "a", "JPEG") 原始图像具有exif数据,但图像im(512_a.JPEG)没有。 回答1 在我的项目中,我与您遇到了同样的问题。 搜索谷歌之后,我发现了piexif库。 它有助于Pilow将exif数据保存到缩略图中。 您可以使用以下源代码: from PIL import Image import piexif import StringIO file_path = '/home/me/img/a.JPG' im = Image.open( file_path) #
  • 如何使用dropzone为存储在服务器上的图像生成缩略图?(How to generate thumbnails for images stored on the server using dropzone?)
    问题 我正在尝试显示已经存储在服务器上的图像。 我使用以下代码在dropzone中显示: myDropzone.emit("addedfile", mockFile); myDropzone.emit("thumbnail", mockFile, "url/image"); 但是有一个问题,生成的缩略图仅将尺寸缩小为指定的缩略图尺寸,而没有裁剪。 问题是当我调用功能缩略图图像时,裁剪图像没有完成。 可以使用现有方法生成一个临时缩略图并将其发送到缩略图函数调用中吗? 回答1 我建议您在服务器上创建缩略图,因为否则您的用户需要下载原始大小的所有图像,才能查看较小的缩略图。 话虽如此,如果您仍然想继续下载原始文件并在浏览器中调整大小,我刚刚发布了Dropzone v4.0.1,其中包含了函数createThumbnailFromUrl() 。 像这样使用它: myDropzone.emit("addedfile", mockFile); myDropzone.createThumbnailFromUrl(mockFile, '/your-image.jpg'); (附带说明:映像需要托管在同一服务器上,否则会出现跨域错误)
  • 当Bootstrap列为奇数时如何居中?(How to center Bootstrap columns when they are an odd number?)
    问题 我正在使用Bootstrap创建图像滑块,并且遇到了似乎无法解决的问题。 在此滑块的每个实例下,我将具有3列缩略图(每行4张)。 但是,有些滑块没有4个缩略图,有些滑块没有1、2或3。在这些情况下,我想将缩略图水平居中,同时保持相同的15px装订线,如果它们有4个的话。 现在,当只有2张缩略图时,这很容易,因为我可以在缩略图集之前和之后简单地添加一个空的3列div。 当只有1个缩略图时,我可以删除float并使用margin:0 auto; 居中,但是当有3个缩略图时我不知道该怎么办。 谁能告诉我实现此目标的最佳方法是什么? 我当时认为能够设置半列会很好,因此我可以在缩略图前后放置一个空的1.5列div。 这可行吗? 以下是3缩略图版本的一些示例代码: <div id="container"> <div class="row"> <!-- Full Size Image --> <div class="col-sm-12"> <img src="http://placehold.it/960x300" /> </div> <!-- Slider Thumbnails --> <div class="col-sm-3"> <img src="http://placehold.it/200x150" /> </div> <div class="col-sm-3"> <img
  • 使用 php 生成图像缩略图 - 不会耗尽内存(Generating image thumbnails using php - without running out of memory)
    问题 我目前正在使用 php gd 实现来调整不断耗尽内存的图像的大小 - 相当快。 我猜问题是 php 函数,比如 imagecreatefromstring 等。 是否有一个简单的实现来调整不使用此功能的图像大小,因此我不必增加我的 php.ini 内存限制? 回答1 GD 不使用那么多内存,因此您的代码中存在其他问题。 如果您调整多个图像的大小并且不对新创建的图像调用imagedestroy ,则会导致内存泄漏。 回答2 这是一个给你的 PHP 函数 function make_thumb($src, $dest, $desired_width,$desired_h) { /* read the source image */ $source_image = imagecreatefromjpeg($src); $width = imagesx($source_image); $height = imagesy($source_image); $desired_height = $desired_h; /* create a new, "virtual" image */ $virtual_image = imagecreatetruecolor($desired_width, $desired_height); /* copy source image at a
  • 通过HTML5 filereader在本地读取大图像作为缩略图(Reading large images as thumbnails locally via HTML5 filereader)
    问题 我正在尝试将本地图像加载为缩略图,如此处所述。 我的代码如下。 这适用于小图像。 但是,当您尝试加载较大的图像(例如4mb)时,会有很大的滞后。 有什么办法可以优化这个? 谢谢 Html <input type="file" id="files" name="files[]" multiple /> <output id="list"></output> Java脚本 <script> function handleFileSelect(evt) { var files = evt.target.files; // FileList object // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { //
  • 如何在Django Bootstrap中每行显示2个span6缩略图?(How to display 2 thumbnails of span6 per row in Bootstrap with Django?)
    问题 我想每行显示2个缩略图。 仅使用多行对其进行硬编码,并且每行具有2个span6 div,这将是微不足道的。 但是我该如何在Django中使用模板for循环来做到这一点? 例子: {% for image in images %} <div class="row"> <div class="span6">*image goes here*</div> <div class="span6">*image goes here*</div> </div> {% endfor %} // repeat for all items in the list, with 2 images per row 因此,在span6以上的代码中,应在每次循环迭代中创建一次,但应仅每2次迭代创建row 。 更新:我能够将我所有的span6元素都放在一行中。 我遇到了缩略图无法正确对齐(行之间的空白)的问题。 将所有缩略图设置为统一的高度可以解决此问题。 但是Hedde的解决方案看起来也不错,尽管这涉及在Python方面进行更改。 回答1 好吧,它只能由css完成,但是如果要使用提供的网格,则可以创建一个生成器,并在视图的queryset上使用它,或者通过使用标签直接在模板中使用它,例如 def grouped(l, n): # Yield successive n-sized chunks from l