我正在尝试使用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>
我不习惯在这里提问,所以如果我错过了任何信息,或者你还需要其他任何信息,那么就提出要求并提供它。
提前致谢。
答案 0 :(得分:0)
我认为对于课程mdl-card__title
,您需要将background-size
设置为类似contain
的内容。
有关详细信息,请参阅https://css-tricks.com/almanac/properties/b/background-size/。
答案 1 :(得分:0)
答案 2 :(得分:0)
我假设您希望整张横幅图像显示在每张卡片的顶部。如果是这样,图像本身需要具有相同的宽高比(否则卡将是不同的高度),然后将图像的高度除以宽度以获得表示为百分比的宽高比,然后将该百分比设置为{{ 1}}或padding-top
他们应用的元素。还要确保元素的高度为0,或者没有指定高度,并且内部没有内容。
这是您当前的布局,每张图片的宽高比为每张卡片的填充。由于图像大小不同,因此卡片的高度不同。
padding-bottom
&#13;