如何将图像添加到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，而不是一个接一个地编码，因为很多头痛都会等待你。