Question

我正在使用phonegap上的移动应用程序。

我有一个场景，人们会附加图像和上传图像。

因此无论div大小如何，我都希望我的图像能够采用那么大的尺寸，而不管它的原始大小。

下面是代码块

  <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>

这里是fiddle的相同内容。请帮忙

Answer 1

添加宽度100%

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

Answer 2

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

Answer 3

我认为宽度和高度100％的img会起作用。

img{
 width: 100%;
 height: 100%;
}

小提琴： https://jsfiddle.net/3aau3ks7/2/

Answer 4

添加样式

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

到你的样式表它工作正常，我添加了下面的代码片段。

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>

图像大小根据应用程序中的div大小

4 个答案: