投稿を少し更新しました。もう一度試してください。画像のサイズは、お好みに合わせて調整する必要があります。どのようなサイズをご希望か分かりませんので、すべてに300を使用しましたが、私にはうまくいきました。画像のサイズは好みの問題になります。
Windows ChromeでもiOS Safariでも問題なく動作しています。スクリーンショットや投稿を行うために両方を使用しました。投稿した更新済みコードを試してみてください。問題が解決するかもしれません。
同じ問題です…
どの問題ですか？Chromeのサイズの問題ですか？
申し訳ありません、不明瞭でした。問題は、メインブラウザ（Chrome）を使用すると、フッターのロゴが表示されないことです。Safariを使用すると、フッターのロゴが表示されます。また、彼女のMacBookでChromeを試したところ、彼女にとっては問題なく動作し、フッターのロゴを見ることができました。そのため、私のChromeに何か奇妙なことがあるのかもしれません。何が原因なのか全く分かりません。
また、電話ではフォーマットが正しくスケーリングされていないことに気づきました。これを修正する方法をご存知ですか？
画面サイズに合わせて画像を表示したり縮小したりしたいということでしょうか？ モバイル表示用に別のフッターを作成することもできますし、デスクトップ表示にフッターを配置することもできます。HTML/CSS編集画面には、デスクトップ用とモバイル用で、共通セクションと同じタブを持つセクションがあることに気づくでしょう。
画像サイズを変更するには、HTMLを試す必要があるでしょう。パーセンテージでの相対サイズを使用したいと思いますが、画像はすべてサイズが異なるため、すべての画像サイズが同じでない限り、それは困難になります。何をご希望なのか、よくわかりません。
「いいね！」 1
私よりもはるかに賢い誰かが、拡張機能が問題を引き起こしていないことを確認するために、ブラウザのシークレットモードで確認することを提案しました。
画像をご希望のサイズにリサイズしてから、デスクトップとモバイルの表示CSSおよびFOOTERセクションの違いを使用して、お探しのものを取得することをお勧めします。
「いいね！」 1
はい、明確でなく申し訳ありません。デスクトップとモバイルの両方で、ウィンドウサイズに合わせてロゴをスケーリングするようにしたいのです。
（シークレットモードの使用は素晴らしいアイデアでした :)）
ミケーレ様
以下のコードをお試しいただけますでしょうか。
HTML（画像の width 属性を削除し、コンテナに wrap クラスを追加しました）：
<div class="wrap custom-footer-image">
<a href="https://www.wur.nl/en.htm/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image"></a>
<a href="https://www.cirad.fr/en/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/d0cf79c6442d594dc4efe3a009cd04c277f9bea8.png" alt="Footer Image"></a>
<a href="https://www.uni-goettingen.de/en/1.html/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image"></a>
<a href="http://algorithmicbotany.org/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image"></a>
</div>
CSS：
.custom-footer-image {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
a {
flex: 1;
text-align: center;
img {
max-width: 100%;
}
}
}
デスクトップでの表示：
モバイルでの表示：
いかがでしょうか。
モバイルレイアウトは、モバイルで画像が小さすぎる場合に、2列×2枚の画像に変更することも可能です。
「いいね！」 4
完璧に動作しました。素晴らしいサポートをありがとうございました！
「いいね！」 2
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.