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

我在这里的第一篇文章已经阅读了指导原则，希望我能正确提出。

我一直在尝试使图像适合div，但是发生的事情是它适合div但没有扩展到它的大小。

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

有没有办法从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和。 ？

最佳答案

一个单一的#container用于contain元素的目的应该没问题。我已经更新了您提出问题的方式。也可以根据您的情况，可能应该删除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>

关于html - 图片适合div大小并可以点击，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32427655/