自举

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

看到图像

显然，这个正在做的工作：

谢谢大家的anwares

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宽度和高度属性，并添加img-responsive类和引导将照顾它。

不带引导程序：
一般情况下，根据父级给出容器宽度（％）和图像宽度和高度。像

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

CSS：

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

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