如何在Google Material Components网站中将标题图像添加到抽屉？

Question

我正在使用Google Material Components for web构建网站。我在我的网站上添加了一个抽屉，我想添加一个标题图片，但我不知道该怎么做。这是Material Design网站上的抽屉部分：

https://material.io/develop/web/components/drawers/

Answer 1

直到现在，仍没有实现这一目标的官方方法。最简单的方法是：

首先，包装标题标题（不包括img标签）

<div class="mdc-drawer__header">
    <img id="header-image" src="img.jpg">
    <div id="titles-wrapper">
        <h3 class="mdc-drawer__title">Title</h3>
        <h6 class="mdc-drawer__subtitle">Subtitle</h6>
    </div>
<div>

秒，在您的CSS文件或style标签上，

#header-image, #titles-wrapper {
    display: inline-block;
    vertical-align: middle;
}

#header-image {
    width: 32.5%;
}

#titles-wrapper {
    width: 66.5%;
}

注意：不必使图像宽度为32.5％，但对于总宽度留出2％的余量至关重要。 30％和68％会起作用。