【发布时间】：2017-08-12 08:24:47
【问题描述】：
我正在尝试使用 MDL 制作网站，我想使用卡片列出人们可以访问的网站上的不同位置。
我无法让图像调整大小以适应不同的设备。
我目前正在平板电脑（surface pro 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>
我不习惯在这里提问，所以如果我遗漏了任何信息或您需要其他任何信息，请直接询问并提供。
提前致谢。
【问题讨论】：
-
您是否希望在所有分辨率/屏幕尺寸上显示完整图像？
标签： html css image resize image-resizing