style(article): change cover image aspect ratio to 16:9 for cards and detail page

yyyCode · yyyCode · commit cc884908d24a · 2026-07-31T02:29:02.000+08:00
diff --git a/vue/src/assets/blog.css b/vue/src/assets/blog.css
@@ -195,13 +195,15 @@ body {
 
 .article-cover {
   background: var(--placeholder-tint);
-  height: 130px;
+  aspect-ratio: 16 / 9;
   width: 100%;
+  overflow: hidden;
+  border-radius: 8px;
 }
 
 @media (min-width: 561px) {
   .article-cover {
-    height: 100%;
+    aspect-ratio: 16 / 9;
   }
 }
 
@@ -1464,14 +1466,14 @@ body {
   border-radius: 10px;
   overflow: hidden;
   background: var(--placeholder-tint);
+  aspect-ratio: 16 / 9;
 }
 
 .article-reader-cover img {
   width: 100%;
+  height: 100%;
   display: block;
-  vertical-align: middle;
   object-fit: cover;
-  max-height: min(52vh, 440px);
 }
 
 .article-markdown--body {

Original file line number	Diff line number	Diff line change
`@@ -195,13 +195,15 @@ body {`
`195`	`195`
`196`	`196`	`.article-cover {`
`197`	`197`	`background: var(--placeholder-tint);`
`198`		`- height: 130px;`
	`198`	`+ aspect-ratio: 16 / 9;`
`199`	`199`	`width: 100%;`
	`200`	`+ overflow: hidden;`
	`201`	`+ border-radius: 8px;`
`200`	`202`	`}`
`201`	`203`
`202`	`204`	`@media (min-width: 561px) {`
`203`	`205`	`.article-cover {`
`204`		`- height: 100%;`
	`206`	`+ aspect-ratio: 16 / 9;`
`205`	`207`	`}`
`206`	`208`	`}`
`207`	`209`
`@@ -1464,14 +1466,14 @@ body {`
`1464`	`1466`	`border-radius: 10px;`
`1465`	`1467`	`overflow: hidden;`
`1466`	`1468`	`background: var(--placeholder-tint);`
	`1469`	`+ aspect-ratio: 16 / 9;`
`1467`	`1470`	`}`
`1468`	`1471`
`1469`	`1472`	`.article-reader-cover img {`
`1470`	`1473`	`width: 100%;`
	`1474`	`+ height: 100%;`
`1471`	`1475`	`display: block;`
`1472`		`- vertical-align: middle;`
`1473`	`1476`	`object-fit: cover;`
`1474`		`- max-height: min(52vh, 440px);`
`1475`	`1477`	`}`
`1476`	`1478`
`1477`	`1479`	`.article-markdown--body {`