Ionic framework 使图像在屏幕上显示得更小 西姆兰·考尔

1992年11月6日

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

看起来是这样的：

这是我的完整代码：

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

西姆兰·考尔
1992年11月6日


这是一张“Facebook”风格的卡片。标题是从缩略图列表项创建的，
内容来自由图像和段落文本组成的卡片正文。页脚
在卡片页脚内由左对齐的选项卡和图标组成。

有一个关于如何对卡进行编码的规则。阿凡达在左侧渲染为小，封面渲染为大，并占据整个空间

下面是codepen，您的图像呈现大小：

马蒂·麦克弗利
1955年11月5日


这是一张“Facebook”风格的卡片。标题是从缩略图列表项创建的，
内容来自由图像和段落文本组成的卡片正文。页脚
在卡片页脚内由左对齐的选项卡和图标组成。

如果您将窗口缩小（如400像素），它是否像您期望的那样？

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

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