HTML - 帶圖像的佈局

Question

如何使圖像適合div大小？我想這樣的事情https://www.quackit.com/html/templates/download/bootstrap/portfolio-2-column/index.html#

ATM是巨大的：https://i.gyazo.com/ae6d8873c56931cb9972b4c777799dc9.jpg

<div class="row"> 
<div class="col-md-6 portrait" > 
    <h2>Gaming</h2> 
    <a href="#"> 
     <img src="~/Content/Images/Battlefield1.jpg" alt=""/> 
    </a> 
    <p> 
     Gaming is the act of playing games. 
    </p> 
    <p><a class="btn btn-default" href="@Url.Action("Gaming","Gaming")" > Take me to Gaming &raquo;</a></p> 
</div> 
<div class="col-md-4"> 
    <h2>Get more libraries</h2> 
    <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p> 
    <p><a class="btn btn-default" href="@Url.Action("Hot","Memes")" >Take me to Memes &raquo;</a></p> 
</div> 
<div class="col-md-4"> 
    <h2>Web Hosting</h2> 
    <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p> 
    <p><a class="btn btn-default" href="@Url.Action("Programming","Programming")" >Take me to Programming &raquo;</a></p> 
</div> 

Answer 1

看起來你正在使用的樣式表，因爲它在那裏佈局合理，你正在使用的CSS類名。沒有CSS，很難說你的問題是什麼。

如果圖像上沒有CSS，那就是個問題。如果圖像很大，並且overflow被設置爲在div上可見，那麼這就是爲什麼你看到巨大的圖像。我會給圖像類，像這樣：

.class { 
    max-width: 100%; 
    height: auto; 
} 

這將確保它不超過div的全寬度。如果你只是想確保它總是100％，然後使用width而不是max-width然而，如果你使用width它將最終縮放圖像。

那麼你當然會希望將該類添加到您的圖像，像這樣：

<img class="class" src="~/Content/Images/Battlefield1.jpg" alt=""/> 

另一種選擇是在上面的CSS改變.class到.portrait img這會影響到所有的圖像在portrait DIV ，其中似乎你只想要一個人在那裏。