So far I’ve managed to create a banner image that adapts to the note width using @gapmiss’ advice. To use it, you type obsidian-banner in the frontmatter. This is the code:
.obsidian-banner img {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 300px;
width: 100%;
margin-right: auto;
margin-left: auto;
object-fit: cover;
object-position: center;
overflow: hidden;
user-select: none;
}
.obsidian-banner .inline-title {
margin-top: 300px;
}
.obsidian-banner.is-readable-line-width img {
width: var(--file-line-width);
}
This is what it looks like:
However, with this code the banner uses the last image in the note, not the first one. I still can’t get it to select the first image.