Question

我尝试使用引导程序创建一个响应式图像库，这样，如果您将屏幕缩小，图像仍然在正确的尺寸。

我这样试试：

<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;
      }

见图片 enter image description here

显然这是在做这个工作：

谢谢大家的提示

Answer 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之后，以便它可以正常工作。

Answer 2

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

Answer 3

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

没有Bootstrap：
通常，根据父级给出容器宽度％和图像宽度和高度。像

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

CSS：

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

将媒体查询用于不同的设备方向。

图像库与引导程序

3 个答案: