enhance(client): 1枚だけのメディアリストの画像のアスペクト比を画像に応じて縦長にする (#10452)

* ✌️

* fix

* ✌️

* 422px上限

* 334

* min-height: 130px

* 64px

* fix

* wip

* ✌️

* fix

* max-height: none

* MkImgWithBlurHashでratioを計算する

* wip

* fix

* fix?

* Revert "fix?"

This reverts commit e39d832dd1.

* Revert "fix"

This reverts commit 15be36ba55.

* Revert "wip"

This reverts commit af7d86f69d.

* fix

* Revert "Revert "wip""

This reverts commit bb0036ae22.

* Revert "Revert "fix""

This reverts commit c1d94a45c5.

* Revert "Revert "fix?""

This reverts commit 9cb4fbfd96.

* fix

* use clamp

* readable

* add 1:1, 3:4

* moveComment

* 3:4 → 2:3

* fix

* default

* fallback

* Revert "fallback"

This reverts commit 741717dd49.

* Fix?(server): Content-Dispositionのパースでエラーが発生した場合にもダウンロードが完了するように
#10626

packages/frontend/src/pages/settings/general.vue

@@ -81,6 +81,14 @@
 				<option value="2"><span style="font-size: 16px;">Aa</span></option>
 				<option value="3"><span style="font-size: 17px;">Aa</span></option>
 			</MkRadios>
+
+			<MkRadios v-model="mediaListWithOneImageAppearance">
+				<template #label>{{ i18n.ts.mediaListWithOneImageAppearance }}</template>
+				<option value="expand">{{ i18n.ts.default }}</option>
+				<option value="16_9">{{ i18n.t('limitTo', { x: '16:9' }) }}</option>
+				<option value="1_1">{{ i18n.t('limitTo', { x: '1:1' }) }}</option>
+				<option value="2_3">{{ i18n.t('limitTo', { x: '2:3' }) }}</option>
+			</MkRadios>
 		</div>
 	</FormSection>
 
@@ -172,6 +180,7 @@ const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfin
 const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
 const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
 const aiChanMode = computed(defaultStore.makeGetterSetter('aiChanMode'));
+const mediaListWithOneImageAppearance = computed(defaultStore.makeGetterSetter('mediaListWithOneImageAppearance'));
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);