如何將圖像添加到HTML中的指定容器？

Question

我在第一行做了幻燈片，現在幻燈片下面有2個容器。每當我添加一個圖像來代替添加文本的位置時，圖像似乎對容器沒有限制，只是填充頁面。如何將圖像放在容器中而不會溢出？另外，如果可能的話，我也很樂意製作這些圖片鏈接。目前，我還沒有創建任何CSS，因爲我猜這將是需要的。

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

 
<div class="row"> 
 
    <div class="col-md-3 col-md-offset-2"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     Put Some Text Here<br><br><br><br><br><br><br><br><br><br><br> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-3 col-md-offset-2"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
     Or Maybe Over Here<br><br><br><br><br><br><br><br><br><br><br> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

你是對的。在這種情況下，在HTML中使用圖像會破壞容器的用途，因此，您只能使用「img src」粘貼圖像。

您將容器保持原樣並保存在您定位該容器的CSS中，並添加圖像作爲容器的背景。

#container {background-image: url("path/to/image.jpg");} 

要使容器成爲鏈接，只需將容器放入鏈接元素中。

<a href="link.com"><div id="container"></div></a> 

記住同時編碼HTML和CSS，而不是一個接一個地編碼，因爲很多頭痛都會等待你。