image size as per the div size in the app - html

Question

I am working on a mobile app on phonegap.
I have a scenario where people will be attaching images and uploading images.
So whatever the div size is I want my image to take that much size regardless of it's original size.
Below is chunk of the code
<div class="comment-div">
<h2>User 2 <span>15 Aug 2016</span></h2>
<p>When we will be able to build a society of humans on Mars? </p>
</div>
<div class="comment-div odd">
<h2>User 1 <span>15 Aug 2016</span></h2>
<p>I think if you managed to keep your hand still in the bucket, you would suffer from significant muscle atrophy. </p>
</div>
<div class="comment-div">
<img src="http://webcareinfoway.com/images/Web_pics/android-logo-transparent.png" alt="Smiley face">
</div>
<div class="comment-div">
<img src="http://vectorlogo4u.com/wp-content/uploads/2015/09/Google-New-2015-logo-720x340.png" alt="Smiley face">
</div>
Here's the fiddle for the same. Please help

Answer 1

add width 100%
.comment-div img{
width:100%;
}

Answer 2

I think img with width and height 100% will work.
img{
width: 100%;
height: 100%;
}
fiddle:
https://jsfiddle.net/3aau3ks7/2/

Answer 3

.comment-div img{
width:100%;
height:100%;
}

Answer 4

add the style
.comment-div img{
width:100%;
height:100%;
}
.comment-div{
box-sizing:border-box;
}
to your style sheet it works fine,I'm added the snippet below.
comment-div h2 {
width: 100% !important;
font-size: 14px !important;
margin-bottom: 5px !important;
font-weight: 400 !important;
color: #673a9a !important;
text-transform: capitalize !important;
}
.question-div p {
display: block;
}
.comment-div p {
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: #000;
}
.comment-div.odd:after {
bottom: 15px;
left: auto;
right: -7px;
border-color: transparent transparent #bbd7ed transparent;
}
.comment-only .comment-div {
background-color: #95d6ff;
}
.comment-div {
background-color: #6ee3ed;
width: 100%;
position: relative;
float: left;
margin-top: 7px;
height: auto;
padding: 10px 15px;
border-radius: 4px;
}
.comment-div img{
width:100%;
height:100%;
}
.comment-div{
box-sizing:border-box;
}
<div class="comment-div">
<h2>User 2 <span>15 Aug 2016</span></h2>
<p>When we will be able to build a society of humans on Mars? </p>
</div>
<div class="comment-div odd">
<h2>User 1 <span>15 Aug 2016</span></h2>
<p>I think if you managed to keep your hand still in the bucket, you would suffer from significant muscle atrophy. </p>
</div>
<div class="comment-div">
<img src="http://webcareinfoway.com/images/Web_pics/android-logo-transparent.png" alt="Smiley face">
</div>
<div class="comment-div">
<img src="http://vectorlogo4u.com/wp-content/uploads/2015/09/Google-New-2015-logo-720x340.png" alt="Smiley face">
</div>