根据设备调整图像大小

Question

我正在尝试使用 MDL 制作一个网站，我想使用卡片列出网站上人们可以去的不同地方。

我无法让图像调整大小以适应不同的设备。

我目前正在平板电脑 (surface pro 3) 上编写它并认为它工作正常，直到我在我的 phone 和我的桌面上测试它并且我意识到它没有缩放。

我的代码在这个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

我认为对于 class 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

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

这是您当前的布局，每张图片的纵横比作为每张卡片的填充。由于图像大小不同，卡片的高度也会不同。

<!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;
      padding: 0;
  }
  .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('http://djgb.co.uk/imgs/marvel.jpg') center / cover;padding-top:50%;">
       </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('http://djgb.co.uk/imgs/DC.png') center / cover;padding-top: 37.015%">
       </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('http://djgb.co.uk/imgs/dis_pix.jpg') center / cover;padding-top: 25.4%">
       </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>

根据设备调整图像大小

Make images resize depending on device

html

css

image

resize

image-resizing