自舉

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

使用不同設備的方向媒體查詢。