Я немного обновил свой пост. Попробуй ещё раз. Тебе придётся поэкспериментировать с размером изображения, чтобы получить желаемый результат. Я не знаю, какой размер тебе нужен, и использование значения 300 для всех изображений отлично сработало у меня. Выбор размера изображения — это дело вкуса.
У меня нет проблем ни в Chrome на Windows, ни в Safari на iOS. Я использовал оба браузера для создания скриншотов и публикаций. Попробуйте обновлённый код, который я опубликовал. Возможно, это исправит проблему.
та же проблема…
какая проблема? проблема с размером в Chrome?
Извините за неясность; проблема в том, что когда я использую свой основной браузер (Chrome), я не вижу логотип в подвале. Когда я использую Safari, я вижу логотипы в подвале. Я также попробовал использовать Chrome на MacBook моей девушки, и у неё всё работало нормально; мы видим логотипы в подвале. Так что, возможно, что-то не так с моим Chrome; я не знаю что именно.
Я также заметил, что на телефоне формат отображается некорректно — знаете, как это исправить?
Вы хотите, чтобы изображения уменьшались и увеличивались в зависимости от размера экрана? Также можно создать отдельный нижний колонтитул для мобильной версии или оставить его только для десктопной. Обратите внимание, что в редакторе HTML/CSS есть отдельные секции для десктопа и мобильных устройств, с теми же вкладками, что и в общем разделе.
Скорее всего, вам придётся поэкспериментировать с HTML-кодом, отвечающим за размер изображений. Вероятно, стоит использовать относительные размеры в процентах, но поскольку все изображения имеют разные размеры, это может оказаться сложным, если у вас нет изображений одинакового размера. Мне не совсем понятно, чего именно вы хотите добиться.
Кто-то здесь гораздо умнее меня предложил, что, возможно, стоит проверить это в режиме инкогнито браузера, чтобы исключить влияние расширений, которые могут вызывать проблемы.
Я предлагаю вам изменить размер изображений до похожих размеров, с которыми вам удобно работать, а затем использовать различные разделы CSS для представления на настольных и мобильных устройствах, а также раздел FOOTER, чтобы получить то, что вы ищете.
Да, извините, что не был достаточно ясен. Я хотел бы, чтобы логотипы масштабировались в зависимости от размера окна, как для настольной версии, так и для мобильной.
(Использование режима инкогнито — отличная идея 
)
Привет, Мишель,
Попробуй, пожалуйста, следующий код:
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%;
}
}
}
Как это выглядит на десктопе:
На мобильных устройствах:
Что ты думаешь?
Мобильную верстку можно изменить на две колонки по две картинки, если изображения получаются слишком маленькими на телефонах.
Всё работает отлично, спасибо всем за отличную поддержку!