#css
#css
Вопрос:
У меня заголовок из двух частей. Левые 20% занимают изображение (наш логотип), а правые 80% — это навигация и т.д.
Ширина самого заголовка, а также любой его части, выражается в процентах. Высота выражается через em . Это приводит к довольно гибкому макету. Единственной проблемной областью является логотип — поскольку его размеры не совпадают с размерами контейнера, он будет то идеально вписываться в определенные разрешения, то становиться слишком маленьким и вытесняться сверху в других разрешениях.
Единственный CSS, применяемый к изображению, — это ширина внутри контейнера и поле.
Как я могу гарантировать, что логотип заполнит весь контейнер независимо от разрешения?
Ответ №1:
Вы бы также указали логотипу ширину в процентах (вероятно, 100%, чтобы заполнить контейнер). Имейте в виду, что при этом вы зависите от возможностей браузера по масштабированию изображений, которые в некоторых случаях могут привести к нежелательным результатам.
Тем не менее, похоже, что вы масштабируете с помощью двух совершенно разных переменных: горизонтальное масштабирование на основе ширины окна просмотра и вертикальное масштабирование на основе настроек размера шрифта. Хотя я приветствую вашу цель за гибкость, возможно, переосмыслите необходимость масштабирования самого логотипа. Не все на странице нужно масштабировать.
Комментарии:
1. Изображение уже имеет ширину в процентах. Вы хотите сказать, что я должен придать заголовку абсолютную высоту и ширину в пикселях? Или мне следует задать высоту в процентах (с которой, по моему опыту, сложнее работать)?
2. Вы непропорционально масштабируете высоту и ширину. Таким образом, я не вижу простого способа масштабировать изображение вашего логотипа только с помощью CSS. Вы могли бы использовать JS … захватить высоту и ширину контейнера, а затем рассчитать, в каком масштабе должно быть изображение, чтобы оно наилучшим образом подходило, основываясь на соотношениях сторон контейнера. Но это кажется слишком сложной технологией для того, что больше похоже на проблему визуального дизайна.
3. Что бы вы предложили в качестве простейшего решения?
4. Самым простым решением было бы изменить внешний вид и расположение заголовка, чтобы не требовалось масштабировать логотип, чтобы он хорошо выглядел. Но я говорю это как человек, который много занимается визуальным дизайном / дизайном логотипов, поэтому я предвзят в этом направлении. Тем не менее, немногие сайты, если вообще какие-либо, построены так, чтобы элементы брендинга масштабировались подобным образом. Я предполагаю, что другие тоже пытались и отказались. Если бы вы могли показать макет или ссылку на свой сайт, мы могли бы предложить более конкретные ответы / предложения.
Ответ №2:
Возможно, вы захотите добавить минимальную ширину к своему изображению или его контейнеру, чтобы убедиться, что оно «сжимается» только до определенной степени.