css show full image on click div? - css

Question

If I have an image bigger than 200px height I will crop this image with a 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>
my problem is, I want this div to grow and show full image if user clicks on it.
Any ideas?
https://jsfiddle.net/64f36m4y/

Answer 1

I recommend by using toggleClass.
Better set the height and width of the div and image auto. After using on click function.
JS
jQuery(function($){
$('.voltaimgdiv').click(function(){
$('.voltaimgdiv').toggleClass('full')
})
})
CSS
.full img{
width:100%;
}
.full{
max-height:100% !important;
line-height: 0;
}
DEMO

Answer 2

you can maximize image height on click using this css code
.voltaimgdiv:active{
max-height:500px;
}

Answer 3

if you want to do with CSS.Just Assign ID And Use it in CSS.
HTML:
<div id="clkme" class="voltaimgdiv">
<img src="http://www.pineswcd.com/vertical/Sites/%7BB4CF315C-B365-47D6-A226-5F80C04C0D48%7D/uploads/tree_clipart.gif">
</div>
CSS:
#clkme:active{
max-height:500px;
}
You can Write Javascript As Well And Javascript is a better choice.
by using
Onclick="Name"
Function In div.
and make a body of javascript
function Name{
\\your code ..
}

Answer 4

Try this:
$('.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?