Question

我在第一行制作了幻灯片，现在幻灯片下方有2个容器。每当我添加图像代替文本添加的位置时，图像似乎没有对容器的限制，只是填充页面。如何将图像放在容器中而不会溢出？此外，如果可能的话，我也喜欢将这些图片链接起来。目前，我还没有为此创建任何我需要猜测的CSS。

＆＃13;

<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>

＆＃13;

Answer 1

你是对的。在这种情况下使用HTML中的图像会破坏容器的用途，因此您只能使用＆＃34; img src＆＃34;来粘贴图像。

将容器保留原样，并将CSS放在目标容器的CSS中，并将图像添加为容器的背景。

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

要使容器成为链接，只需将容器放在链接元素中即可。

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

请记住同时编写HTML和CSS代码，而不是一个接一个地代码，因为很多麻烦会等你。

如何在HTML中将图像添加到指定的容器？

1 个答案: