【问题标题】:Have Thumbnails with different images sizes Bootstrap具有不同图像大小的缩略图 Bootstrap
【发布时间】:2014-06-16 06:08:50
【问题描述】:

我想要具有不同大小和不同文本数量的图像的缩略图。但我希望它们都具有相同的大小。喜欢这个example from the Bootstrap site

下面是我目前拥有的代码,带有demo on 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>

【问题讨论】:

    标签: jquery html css twitter-bootstrap


    【解决方案1】:

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

    【讨论】:

    • 如果我使用引导程序,我该怎么做。不太确定:(
    • 添加css规则.image-holder { height: 500px; }并在div中再添加一个类&lt;div class="col-sm-6 col-md-4 image-holder"&gt;
    • 如果我想在 img 中添加一个 css 规则以获得最大宽度。我有这个,但它不起作用:img {max-width: 50%;}
    【解决方案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】:

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

    例如在您的容器元素(.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;
    }
    

    其他元素依此类推。

    SAMPLE

    【讨论】:

    • 这不适用于响应式col-xx-y,但这是个好主意。我什至会说overflow: hidden
    • 如果每个缩略图中的内容发生变化,这将不起作用。例如,如果段落大小增加了三倍,它将扩展超过设置的高度/宽度。虽然我不知道更好的解决方案。可能与“砌体画廊”的逻辑相同。但是,再次不知道如何在 JQuery 或任何其他代码中执行此操作。我很想解决这个问题!
    【解决方案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>
    

    【讨论】:

    • 这是一个很好的解决方案,没有给出任何固定值。
    猜你喜欢
    • 1970-01-01
    • 2017-08-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多