[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio]

2021.11.06 2021.11.05

これまで一行で表示できるタイトル文字数が少なくて、タイトルが長くなると読みにくいことが気になっていました。

ブログカードのデザインを少し変更しました。

そこで、まず画像のアスペクト比を変更したり、文字のサイズを少し小さくして、タイトルを長めに取れるようにしました。

CSSで自動的に画像のアスペクト比を変えて、トリミングすることができました。

img{
    object-fit:cover;
    aspect-ratio: 100/100;
}

また、ドメイン名の色を変更することで、タイトルと区別しやすくしました。

CSSコードのメモ

/*** ブログカードのデザインを整える
*/

article  .blogcard-domain {
	color: #1967d2;
	font-weight:bold;
}
article .blogcard-thumbnail {
	width:160px;
}
.ib-right .blogcard-content, .eb-right .blogcard-content {
	margin-right: 170px;
}

@media screen and (max-width: 840px) {
	article .blogcard-thumbnail {
		width:80px;
	}
	.ib-right .blogcard-content, .eb-right .blogcard-content {
		margin-right: 90px;
	}
	article .blogcard-thumbnail img{
		object-fit:cover;
		aspect-ratio: 100/100;
	}
}
article .blogcard-title {
	margin-top: 1.7em;
	margin-bottom: 0;
}

こちらもどうぞ