Größere Bilder in der Artikelübersicht

<ul class="articleList">
	{foreach from=$objects item='article'}
		<li>
			<a href="{$article->getLink()}">
				<div class="containerHeadline containerHeadlineCustom">
					{if $article->getImage() && $article->getImage()->hasThumbnail('tiny')}
						<div class="articleListImageCustom">{@$article->getImage()}</div>
					{else}
						<div class="articleListImageCustom">{*<img src="Pfad zum Bild">*}</div>
					{/if}
					<div class="articleListTitleWrapperCustom">
						<h3 class="articleListTitleCustom">{$article->getTitle()}</h3>
						<ul class="inlineList articleListMetaData articleListMetaDataCustom">
							<li>
								<span class="icon icon16 fa-clock-o"></span>
								{@$article->time|time}
							</li>
							{if $article->enableComments}
								<li>
								<span class="icon icon16 fa-comments"></span>
									{lang}wcf.article.articleComments{/lang}
								</li>
							{/if}
							{if MODULE_LIKE && $__wcf->getSession()->getPermission('user.like.canViewLike')}
								<li class="wcfLikeCounter{if $article->cumulativeLikes > 0} likeCounterLiked{elseif $article->cumulativeLikes < 0}likeCounterDisliked{/if}">
									{if $article->likes || $article->dislikes}
											<span class="icon icon16 fa-thumbs-o-{if $article->cumulativeLikes < 0}down{else}up{/if} jsTooltip" title="{lang likes=$article->likes dislikes=$article->dislikes}wcf.like.tooltip{/lang}"></span>{if $article->cumulativeLikes > 0}+{elseif $article->cumulativeLikes == 0}±{/if}{#$article->cumulativeLikes}
									{/if}
								</li>
							{/if}
						</ul>
					</div>
				</div>
				<div class="containerContent articleListTeaser">
					{@$article->getFormattedTeaser()}
				</div>
			</a>
		</li>
	{/foreach}
</ul>

/* Articlelistmod */


.articleListImageCustom {
	background-color: rgba(0,0,0,0.5);
	align-items: center;
	display: flex;
	min-height: 300px; /* Standardhöhe Artikelbild */
	max-height: 300px; /* Standardhöhe Artikelbild */
	overflow: hidden;
}


.articleListImageCustom img {
	width: 100%; /* Skaliert Bilder immer auf die max. Breite */
	position: relative;
}


.containerHeadlineCustom {
	position: relative;
}


.articleListTitleCustom {
	font-size: 24px;
	color: rgba(255, 255, 255, 1);
}


.articleListTitleWrapperCustom {
	background-color: rgba(0,0,0,0.8);
	padding: 10px 20px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}


.articleListMetaDataCustom {
    color: rgba(255, 255, 255, 0.7);
}