Question

我正在尝试使用MDL创建一个网站，我想使用卡片列出人们可以访问的网站上的不同位置。

我无法将图像调整为不同的设备。

我目前正在平板电脑上写这篇文章（表面专业版3）并且认为它工作正常，直到我在手机和桌面上测试它并且我意识到它没有缩放。

我的代码在jsfiddle。

<!DOCTYPE html>
<html>
    <head>
        <meta name=viewport content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-pink.min.css"/>
        <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <title>Man of Steelbook</title>
    </head>
    <body>
        <!-- Wide card with share menu button -->
        <style>
        .demo-card.mdl-card {
          width: 98%;
        }
        .demo-card > .mdl-card__title {
          color: #fff;
          max-width: 100%;
          height: auto;
        }
        .demo-card > .mdl-card__menu {
          color: #fff;
        }
        </style>

        <!-- Simple header with scrollable tabs. -->
        <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
          <header class="mdl-layout__header">
            <div class="mdl-layout__header-row">
              <!-- Title -->
              <span class="mdl-layout-title">Man of Steelbook</span>
            </div>
          </header>

          <div class="mdl-layout__drawer">
             <span class="mdl-layout-title" style="background-color: teal; color: white; border: 0px;">Man of Steelbook</span>
                <nav class="mdl-navigation">
                  <a class="mdl-navigation__link" href="index.html">Home</a>
                  <a class="mdl-navigation__link" href="about.html">About Me</a>
                  <a class="mdl-navigation__link" href="my_collection.html">My Collection</a>
                  <a class="mdl-navigation__link" href="contact.html">Contact</a>
                </nav>
          </div>
          <main class="mdl-layout__content">
          <section class="mdl-layout__tab-panel is-active" id="scroll-tab-3">
              <div class="page-content">
                <div class="mdl-grid">
                  <div class="mdl-cell mdl-cell--4-col">
                    <div class="demo-card mdl-card mdl-shadow--2dp">
                      <div class="mdl-card__title" style="background: url('imgs/marvel.jpg') center / cover;">
                      </div>
                      <div class="mdl-card__supporting-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Mauris sagittis pellentesque lacus eleifend lacinia...
                      </div>
                      <div class="mdl-card__actions mdl-card--border">
                        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                          Get Started
                        </a>
                      </div>
                    </div>
                  </div>
                  <div class="mdl-cell mdl-cell--4-col">
                    <div class="demo-card mdl-card mdl-shadow--2dp">
                      <div class="mdl-card__title" style="background: url('imgs/DC.png') center / cover;">
                      </div>
                      <div class="mdl-card__supporting-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Mauris sagittis pellentesque lacus eleifend lacinia...
                      </div>
                      <div class="mdl-card__actions mdl-card--border">
                        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                          Get Started
                        </a>
                      </div>
                    </div>
                  </div>
                  <div class="mdl-cell mdl-cell--4-col">
                    <div class="demo-card mdl-card mdl-shadow--2dp">
                      <div class="mdl-card__title" style="background: url('imgs/dis_pix.jpg') center / cover;">
                      </div>
                      <div class="mdl-card__supporting-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Mauris sagittis pellentesque lacus eleifend lacinia...
                      </div>
                      <div class="mdl-card__actions mdl-card--border">
                        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                          Get Started
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            </main>
        </div>
</html>

我不习惯在这里提问，所以如果我错过了任何信息，或者你还需要其他任何信息，那么就提出要求并提供它。

提前致谢。

Answer 1

我认为对于课程mdl-card__title，您需要将background-size设置为类似contain的内容。

有关详细信息，请参阅https://css-tricks.com/almanac/properties/b/background-size/。

Answer 2

我希望这会有所帮助：

#portal-logo img {
    width: 33%;
    max-width: 180px; 
    height: auto;
}

有关详情，请点击Here

Answer 3

我假设您希望整张横幅图像显示在每张卡片的顶部。如果是这样，图像本身需要具有相同的宽高比（否则卡将是不同的高度），然后将图像的高度除以宽度以获得表示为百分比的宽高比，然后将该百分比设置为{{ 1}}或padding-top他们应用的元素。还要确保元素的高度为0，或者没有指定高度，并且内部没有内容。

这是您当前的布局，每张图片的宽高比为每张卡片的填充。由于图像大小不同，因此卡片的高度不同。

＆＃13;

padding-bottom

＆＃13;

根据设备调整图像大小

3 个答案: