html - 图像适合 div 大小并可点击

Question

第一次在这里发帖，我已经阅读了指南，所以我希望我问的是正确的。

我一直在尝试让图像适合 div，但结果是它适合 div 但没有拉伸(stretch)到它的大小。

我一直在尝试做的另一件事是使该图像可点击。

有没有办法从 css 调用图像？

这是我一直在尝试的。

#container {
  margin-left: auto;
  margin-right: auto;
  margin-top:50px;
  margin-bottom: 50px;
  max-width: 80%;
  height: 500px;
  border-bottom: 50px solid #000000;
  border-top: 50px solid #000000;
}

#container img {
  width: 100%;
  display: block;
}

<div id="container">
  <img src="images/slider.jpg" alt="design"  />
</div>

我还应该使用 id 和 # 或 class 和 . ？

Answer 1

只有一个 #container 用于包含元素的目的，应该没问题。我已经更新了您提出问题的方式。那也没关系。对于您的情况，您可能应该删除 border。

#container {
  margin-left: auto;
  margin-right: auto;
  margin-top:50px;
  margin-bottom: 50px;
  height: 500px;
  /*border-bottom: 50px solid #000000;
  border-top: 50px solid #000000;*/
}

#container img {
  width: 100%;
  display: block;
  cursor: pointer;
}

<div id="container">
  <img src="http://placehold.it/400x400" alt="design" onclick="alert('Hi, you have clicked!');" />
</div>