Проблема с размером изображения из фотошопа в веб

Я новичок в веб-дизайне, поэтому купил шаблон. Я хочу изменить текст в заголовке. Он сохраняется как изображение png. Я открыл файл PSD в фотошопе и изменил текст.

Затем я переместил этот слой в новый файл и сохранил его как прозрачный файл.

Полученный файл не отображается в том же размере на моей веб-странице. На веб-странице у меня установлен размер изображения, но результат тот же.

Шаблон (цепочка текста сверху)шаблон

Файл Photoshop (см. пропорции)

фотошоп

Полученный веб-сайтВеб-сайт

Что вызывает эту проблему. Как я уже сказал, я взял текстовый слой и поместил его в отдельный документ, где я мог сохранить его прозрачным.

Вероятно, этот вопрос лучше подходит для stackoverflow. Попробуйте открыть изображение либо в браузере (щелкните правой кнопкой мыши и покажите изображение), либо в приложении для просмотра изображений и посмотрите, выглядит ли изображение так, как должно? Это определит, влияет ли ваш код на изображение или само изображение не в порядке. Для меня это похоже на то, что браузер обрабатывает изменение размера изображения. У тебя есть фаербаг? Возьми. Научитесь использовать его. Любить это. Вы можете проверить элемент изображения в firebug и посмотреть, какой css влияет на этот конкретный элемент.

Ответы (1)

Похоже, что изображение на вашей веб-странице может иметь явное значение ширины, установленное в HTML (или, возможно, в CSS), но вы сделали фактическое изображение шире, чтобы оно соответствовало тексту. Таким образом, он масштабируется, чтобы соответствовать тем же размерам, что и раньше.

В этом случае следует исправить или удалить значение ширины. Для этого конкретного графического элемента я не вижу веских причин указывать его, особенно в HTML, но это может зависеть от конкретного макета.

Я нашел CSS, вызывающий эту проблему, и исправил его.