使用引導程序，css和angularjs控制圖像大小

我對web開發有點新，並且無法弄清楚如何限制圖像的大小。使用引導程序，css和angularjs控制圖像大小

我想用bootstrap創建一個卡，我使用引導行類並將我的卡分成2個部分（col-md-3和col-md-6） - 一個用於圖像和其他數據，而我有未知規格的圖像。我期望的是圖像應該佔用col-md-3中可用的整個空間（高度是恆定的200px），並且在sm和xs大小時它應占據整行。 我沒有問題，如果圖像延伸。

這是代碼片段。 https://jsfiddle.net/nLndf1rm/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<ul> 
    <li> 
    <div class="card" style="background-color: grey; float: left; margin: 15px"> 
     <div class="row"> 
     <div class="col-md-3"> 
      <img style="width: 100%; width: 250px; height: 180px ;display: block; float: left" src="https://static01.nyt.com/images/2016/12/15/world/15echevarria-obit/15echevarria-obit-articleLarge.jpg" alt="Card image cap"> 
     </div> 
     <div class="col-md-9"> 
      <h6>A 
         Bishop Javier Echevarría, Leader of Opus Dei, Dies at 84 
        </h6> 
      <div> 
      <p style="color: black;"> 
       Bishop Echevarría was the prelate of Opus Dei, the disciplined and influential global Roman Catholic organization, since 1994..... 
       <br/> 
      </p> 
      </div> 

     </div> 
     </div> 
    </div> 
    </li> 
</ul>

請幫助我。我不介意爲此重寫整個代碼。

來源

2016-12-16 user1918858

你已經設置的IMG寬度設置DIV：100％，寬度：250像素..just使其寬度： 100％它將佔據整個空間 – Geeky

也許你只需要

.col-md-3 img{ 
    max-width: 100%; 
    width: 100%; 
    height: 200px; 
}

，並確保您刪除內部的CSS IMG

.col-md-3 img{ 
 
    max-width: 100%; 
 
    width: 100%; 
 
    height: 200px; 
 
}

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<ul> 
 
    <li> 
 
     <div class = "card" style = "background-color: grey; float: left; margin: 15px"> 
 
      <div class = "row"> 
 
       <div class = "col-md-3" > 
 
        <img src = "http://static01.nyt.com/images/2016/12/15/world/15echevarria-obit/15echevarria-obit-articleLarge.jpg" 
 
         alt = "Card image cap"> 
 
       </div> 
 
       <div class = " col-sm-9 col-md-9"> 
 
        <h6>A 
 
         Bishop Javier Echevarría, Leader of Opus Dei, Dies at 84 
 
        </h6> 
 
        <div> 
 
         <p style = "color: black;"> 
 
          Bishop Echevarría was the prelate of Opus Dei, the disciplined and influential global Roman Catholic organization, since 1994..... 
 
          <br/> 
 
         </p> 
 
        </div> 
 
        
 
       </div> 
 
      </div> 
 
     </div> 
 
    </li> 
 
</ul>

來源

2016-12-16 05:45:47 Rahul

從您的影像風格刪除此：float:left;width:250px;

更新css for你的形象將是

img{ 
    width: 100%; 
    height: 180px ; 
    display:block; 
}

來源

2016-12-16 05:50:08

 <img style="width: 100%; display: block; float: left" src="https://static01.nyt.com/images/2016/12/15/world/15echevarria-obit/15echevarria-obit-articleLarge.jpg" alt="Card image cap">

只是刪除的寬度和高度，只保留寬度在img標籤100％。希望這將工作

來源

2016-12-16 05:56:30

這是有效的 - 試過了，但問題是我想限制卡的高度 – user1918858

爲什麼你伸展你的圖像時，你可以填充它，只需使用下面的代碼，

.col-md-3 img{ 
    max-width: 100%; 
    width : 100% 
    } 
.col-md-3 { 
    height :200px; 
    overflow: hidden; 
    }

也請從IMG標記刪除您的內聯CSS。它會爲你工作，祝你好運:)

來源

2016-12-16 05:57:16

您正在使用引導框架，所以我只是在行之前添加容器。我不知道你爲什麼使用列表元素。無論如何，只需像下面這樣設置圖像風格，也許這種方式得到你的答案。默認情況下，引導程序已經有一個img標籤的img響應類。祝你好運，儘量避免內聯CSS 我也刪除您p元素

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<ul style="padding:0;"> 
 
    <li style="list-style:none;"> 
 
    <div class="card" style="background-color: grey;"> 
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-md-3 col-xs-12 " style="padding:0;"> 
 
      <img style="width:100%; margin:0 auto; display:block; height:auto;" src="http://static01.nyt.com/images/2016/12/15/world/15echevarria-obit/15echevarria-obit-articleLarge.jpg" alt="Card image cap"> 
 
      </div> 
 
      <div class=" col-xs-12 col-md-9"> 
 
      <h6>A 
 
         Bishop Javier Echevarría, Leader of Opus Dei, Dies at 84 
 
        </h6> 
 

 
      <p style="color: black;"> 
 
       Bishop Echevarría was the prelate of Opus Dei, the disciplined and influential global Roman Catholic organization, since 1994..... 
 
       <br> 
 
      </p> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </li> 
 
</ul>

來源

2016-12-16 07:36:02

使用引導程序，css和angularjs控制圖像大小

回答

相關問題