Question

如果我的图像大于200px，我将使用div裁剪此图像：

.voltaimgdiv{
 max-height:200px;
 display:block;  
 line-height:200px;
 overflow:hidden;
 margin-bottom:10px;
}

HTML

<div class="voltaimgdiv">
<img src="http://www.pineswcd.com/vertical/Sites/%7BB4CF315C-B365-47D6-A226-5F80C04C0D48%7D/uploads/tree_clipart.gif">
</div>

我的问题是，如果用户点击它，我希望这个div增长并显示完整图像。有什么想法吗？

https://jsfiddle.net/64f36m4y/

Answer 1

您可以使用此css代码

在点击时最大化图像高度

.voltaimgdiv:active{
  max-height:500px;
}

Answer 2

我建议使用toggleClass。

更好地设置div和图像自动的高度和宽度。使用点击功能后。

JS

jQuery(function($){
             $('.voltaimgdiv').click(function(){
             $('.voltaimgdiv').toggleClass('full')
             })
        })

CSS

.full img{
  width:100%;
}

.full{
  max-height:100% !important;
  line-height: 0;
}

DEMO

Answer 3

如果您想使用CSS.Just分配ID并在CSS中使用它。

<强> HTML：

private

<强> CSS：

<div id="clkme" class="voltaimgdiv">
<img src="http://www.pineswcd.com/vertical/Sites/%7BB4CF315C-B365-47D6-A226-5F80C04C0D48%7D/uploads/tree_clipart.gif">
</div>

您也可以编写Javascript并且Javascript是更好的选择。使用

的onClick =＆＃34;名称＆＃34;

功能在div中。并制作一个javascript的主体

#clkme:active{
  max-height:500px;
  }

Answer 4

试试这个：

$('.voltaimgdiv').click(function() {
    $('.voltaimgdiv').css('height', 'auto');
});

.voltaimgdiv {
    height: 200px;
    display: block;
    line-height: 200px;
    margin-bottom: 10px;
    border: 1px solid #000;
    overflow-y: hidden;
}

<div class="voltaimgdiv">
    <img src="http://www.pineswcd.com/vertical/Sites/%7BB4CF315C-B365-47D6-A226-5F80C04C0D48%7D/uploads/tree_clipart.gif">
</div>

show all image on click?

css在点击div上显示完整图像？

4 个答案: