使图像在离子中显示得更小

Question

<div class="list card">

  <div class="item item avatar item-icon-right">
    <img src="https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png">
    <h2>Simran Kaur</h2>
    <p>November 06, 1992</p>
  </div>

我有离子的这段代码，我在这里添加的任何图像占用了大部分空间。为什么这样，我该如何解决这个问题？

看起来像这样：

这是我的完整代码：

<div class="list card">

  <div class="item item avatar item-icon-right">
    <img src="https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png">
    <h2>Simran Kaur</h2>
    <p>November 06, 1992</p>
  </div>

  <div class="item item-body">
    <p>
      This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
      the content is from a card-body consisting of an image and paragraph text. The footer
      consists of tabs, icons aligned left, within the card-footer.
    </p>
    <p>
      <a href="#" class="subdued">1 Like</a>
      <a href="#" class="subdued">5 Comments</a>
    </p>
  </div>

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="#">
      <i class="icon ion-thumbsup"></i>
      Like
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-chatbox"></i>
      Comment
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-share"></i>
      Share
    </a>
  </div>

</div>

Answer 1

卡应该如何编码example。阿凡达在左侧渲染较小，封面渲染大，占据整个空间。

这是codepen，您的图片既小又大：http://codepen.io/anon/pen/RPvYpp

    <div class="list card">

      <div class="item item-avatar">
        <img src="https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png">
        <h2>Marty McFly</h2>
        <p>November 05, 1955</p>
      </div>

      <div class="item item-body">
        <img class="full-image" src="https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png">
        <p>
          This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
          the content is from a card-body consisting of an image and paragraph text. The footer
          consists of tabs, icons aligned left, within the card-footer.
        </p>
        <p>
          <a href="#" class="subdued">1 Like</a>
          <a href="#" class="subdued">5 Comments</a>
        </p>
      </div>

      <div class="item tabs tabs-secondary tabs-icon-left">
        <a class="tab-item" href="#">
          <i class="icon ion-thumbsup"></i>
          Like
        </a>
        <a class="tab-item" href="#">
          <i class="icon ion-chatbox"></i>
          Comment
        </a>
        <a class="tab-item" href="#">
          <i class="icon ion-share"></i>
          Share
        </a>
      </div>

    </div>