【解決済み】翻訳記事の画像が正常に表示されない

概要:

この質問は未訳記事のネタバレを含みます。ご了承ください。

【技術的問題】翻訳記事の画像が正常に表示されない【ネタバレ注意】

C-Dives 10 Aug 2023 12:38

現在SCP-7785という記事を翻訳しています。この記事はいわゆるフォーマットスクリューであり、オチで端末の幅いっぱいに画像が表示されるようになっています(PC端末版、携帯端末版の2種類が用意されています)。

https://scp-wiki.wikidot.com/scp-7785

しかし、ページソースから内容をサンドボックスにコピペしてみたところ、どちらの表示でも画像が原文より小さく、しかも画面の左寄りになってしまう不具合が生じています。これを解決するための対処法があれば、教えていただければ幸いです。

http://scp-jp-sandbox3.wikidot.com/draft:2375337-182-b6fa

Re: 【技術的問題】翻訳記事の画像が正常に表示されない【ネタバレ注意】

MikuKaneko 11 Aug 2023 03:48

JPのテーマに含まれているコードに上書きされてしまっているので、以下のように変更してください。このようにすれば問題なく表示されるかと思います。

.fullWidthImg {
    max-width: none !important;
}

Re: 【技術的問題】翻訳記事の画像が正常に表示されない【ネタバレ注意】

C-Dives 11 Aug 2023 03:56

ありがとうございます。fullWidthImgをご指摘の通りに差し替えましたが、画像が中心に表示されるようになったものの、原文と同じ幅を再現できていません。これは何が原因なのでしょうか…？

下側の帽子を被ったキャラクターの肩幅が画面幅と同じサイズになり、左右に隙間が生じないのがSCP-EN側での“正常な”表示です。

最後の編集 11 Aug 2023 04:00 by C-Dives さらに表示

Re: 【技術的問題】翻訳記事の画像が正常に表示されない【ネタバレ注意】

MikuKaneko 11 Aug 2023 04:01

言葉足らずでした、失礼いたしました
.fullWidthImgのmax-widthを変更するというのを意味していました…

.fullWidthImg {
  width: 100vw;
  max-width: none !important;
  position: relative;
  left: calc(-50vw + 50%);
}

最後の編集 11 Aug 2023 04:01 by MikuKaneko さらに表示

Re: 【技術的問題】翻訳記事の画像が正常に表示されない【ネタバレ注意】

C-Dives 11 Aug 2023 04:02

解決いたしました！ 本当にありがとうございます！