图像适合div尺寸，并可点击

Question

第一篇文章，我读过指导，所以我希望我正确地问。

我一直在试图让一个图像适合一个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和＃或类。 ？

Answer 1

有一个单一的#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>