带引导程序的图像库答案

【问题标题】：image gallery with bootstrap带引导程序的图像库
【发布时间】：2015-07-01 04:24:56
【问题描述】：

我尝试使用 bootstrap 制作一个响应式图片库，这样，如果您将屏幕缩小，图片仍然可以保持正确的尺寸。

我是这样尝试的：

<div id="tabs-2">


    <link href="~/Content/ShowMoreImages.css" rel="stylesheet" />

    <ul class="row">
        @foreach (var item in Model.LolaBikePhotos)
        {

            @model  ContosoUniversity.Models.UserProfile
            <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img src="/Images/profile/@item.ImagePath" alt="" height=150 width=200 /></li>
        }
    </ul>


</div>

但是如果你把屏幕变小，图像就会相互重叠。

那么如何让它响应？

谢谢

如果我这样做：

<div id="tabs-2">


    <link href="~/Content/ShowMoreImages.css" rel="stylesheet" />
    <div class="container">

    @foreach (var item in Model.LolaBikePhotos)
    {

        @model  ContosoUniversity.Models.UserProfile
                <ul class="row">
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img src="/Images/profile/@item.ImagePath" alt=""  /></li>
    </ul>
    }

    </div>

</div>

那么所有的图像都在彼此之下，而不是在一行中。

这是我的 CSS：

ul {         
          padding:0 0 0 0;
          margin:0 0 0 0;
      }
      ul li {     
          list-style:none;
          margin-bottom:25px;           
      }
      ul li img {
          cursor: pointer;
      }

见图片

显然这是在做这项工作：

感谢大家的关注

【问题讨论】：

移除 img 标签中的 height=150 & width=200..

标签： css html twitter-bootstrap

【解决方案1】：

安装这个库LINK

然后假设您的代码正在获取没有错误的图像，这将起作用：

<div class="container" id="tabs-2">
    <link href="~/Content/ShowMoreImages.css" rel="stylesheet" />
    <div class="row">
        @foreach (var item in Model.LolaBikePhotos){

            @model  ContosoUniversity.Models.UserProfile
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="/Images/profile/@item.ImagePath" alt="" />
                </a>
            </div>
        }
    </div>
</div>

在你的 CSS 中添加这个：

.thumb{
   margin-top: 10px; //or whatever value you want.
}

只要确保你把它放在库 CSS 之后，它就可以工作了。

【讨论】：

嗨，Green，谢谢，但最后一件事，图像现在不是在行维度上，而是在列维度上，我还添加了 css。
嗨@hallohallo 我做了一点改变你介意试试吗？谢谢。
你以前的版本更好，但仍然坚持柱高
好的，请使用以前的版本，只是一个忙，你能发一张图片或屏幕截图来说明布局发生了什么吗？或者添加一些 jsFiddle。谢谢。@hallohallo
嗨@hallohallo 现在看看答案。 :) 希望它有效。

【解决方案2】：

由于您使用的是引导程序，请从您的 <img> 标记中删除 height 和 width 并添加 'class= "img-responsive">。您的图像将根据列宽调整大小。详情在这里：http://getbootstrap.com/css/#images

【讨论】：

【解决方案3】：

响应性在流畅的布局中效果更好。为了实现这一点，以百分比形式给出高度和宽度，以便它根据屏幕（父）宽度和高度自动调整。对于您的示例，只需删除 img 宽度和高度属性并添加 img-responsive 类，引导程序将处理它。

没有引导程序：
一般来说，根据父级给出容器宽度（%）和图像宽度和高度。喜欢

<li class="imageContainer">
   <img class="imageStyle"></img>
</li>

CSS：

.imageContainer{
   width:50%;
}
.imageStyle{
  max-width:100%;
}

针对不同的设备方向使用媒体查询。

【讨论】：