Как уменьшить логотип? [закрыт]
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.
Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.
Закрыт 1 год назад .
я только начал учится верстать. Подскажите пожалуйста как уменьшить логотип, я его добавил в png, а он большой что то
HTML: Изображения
Для лучшего восприятия текста на странице используют изображения. Они помогают ориентироваться в тексте, разбивать его на составные части, а также создают настроение у читателя.
Картинки на странице не существуют сами по себе. Предварительно они должны быть загружены в директорию на сервере или на специальный хостинг картинок. Для вставки картинки на страницу используется непарный тег <img> , у которого два обязательных атрибута: src и alt .
Атрибут src
В атрибуте src указывается путь к изображению. Это тоже ссылка, как и в теге <a> , только теперь не происходит перенаправление пользователя, а браузер загружает изображение по этому пути, если оно существует. Путь к картинке может быть как относительный, так и абсолютный.
Атрибут alt
Что делать, если картинка в данный момент недоступна? В этом случае браузеры показывают маленькую картинку, обозначающую, что изображение недоступно.
Но как пользователь поймёт, что здесь было? Может изображение критически важное для статьи, и без него теряется смысл написанного? Можно посоветовать пользователю зайти попозже, когда изображение будет доступно, а можно описать ему, что было изображено.
Для этого используется атрибут alt , значением которого является текст. Он будет показан при невозможности загрузить изображение
Помимо функции «рассказать то, что не удалось показать» атрибут alt выполняет важнейшую роль для людей, которые пользуются скринридерами — программами для чтения информации с экрана. Так как изображение невозможно прочитать, то программы читают то, что было указано в атрибуте alt
Размеры изображения
Важной составляющей при работе с изображениями являются его размеры. При скачивании картинки со стороннего ресурса и её вставки на страницу, часто возникает ситуация, что изображение очень большое, и его нужно уменьшить. Для этого существуют атрибуты width и height , которые позволяют установить ширину и высоту для картинки.
Картинка будет отображена в размере 320×240 пикселей.
Важно помнить, что использование атрибутов width и height не меняет физический размер картинки — она будет весить столько же, изменится только визуальный размер. Для оптимизации страницы подбирайте картинки нужного размера или уменьшайте их с помощью графического редактора, либо специальных сервисов. Сейчас многие пользуются мобильными телефонами и мобильным интернетом, поэтому вес страницы имеет важное значение
Задание
Вставьте в редактор картинку по адресу https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png и текстом W3C для случаев, если картинка недоступна
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Управление размерами изображений в CSS
Сохранение соотношения сторон предотвращает искажение изображений из-за растяжения или сжатия. Работая с CSS, вы, вероятно, рано или поздно попадете в ситуацию, когда вам будет нужно сохранить исходное соотношение сторон изображения. Очень часто для решения этой проблемы используется CSS-свойство background-image. Есть и более современный подход – это свойство object-fit.
В этом руководстве мы поговорим о таких значениях object-fit, как fill, cover, contain, none и scale-down. Мы обсудим, как они влияют на изображение в целом, а также как с их помощью можно обрезать и масштабировать изображения. Кроме того, вы изучите свойство object-position и увидите, как оно может смещать изображения.
Требования
- Чтобы выполнить этот мануал, вам нужно знать, что такое свойства и значения CSS.
- Вы должны уметь использовать декларации CSS, встроенные в свойство style.
- Редактор кода.
- Современный веб-браузер, поддерживающий object-fit and object-position.
Стандартное поведение изображений
В этом руководстве мы рассмотрим следующий код:
В результате он выдает:
Исходная ширина этого изображения – 1200 пикселей, высота – 674 пикселей. С помощью атрибута img этим параметрам были присвоены значения 600 и 337 – это половина исходных размеров с сохранением соотношения сторон.
Давайте теперь предположим, что у нас есть макет, который ожидает, что изображения будут иметь ширину в 300 пикселей и высоту в 337 пикселей:
В браузере этот код покажет следующий результат:
Полученное изображение больше не сохраняет исходное соотношение сторон и кажется визуально сжатым.
Как работает object-fit: fill
fill – это начальное значение object-fit. Оно не сохраняет исходное соотношение сторон.
Этот код выдаст в браузере следующий результат:
Поскольку это исходное значение для движков рендеринга в браузерах, внешний вид масштабированного изображения не меняется. Полученное изображение по-прежнему выглядит сжатым.
Как работает object-fit: cover
Значение cover сохраняет исходное соотношение сторон изображения, но изображение занимает все доступное пространство.
Данный код покажет в браузере такой результат:
В определенных ситуациях object-fit: cover может обрезать изображение. В этом примере некоторые части исходного изображения (слева и справа) не отображаются, потому что они не умещаются в пределах заявленной ширины.
Как работает object-fit: contain
Значение contain сохраняет исходное соотношение сторон, но при этом изображение не может выходить за пределы доступного пространства.
Этот код выдаст в браузере следующий результат:
В некоторых ситуациях object-fit: contain приводит к тому, что изображение не может заполнить все доступное пространство. Как вы видите в данном примере, над и под изображением есть пустое горизонтальное пространство, потому что заявленная доступная высота больше, чем высота масштабированного изображения.
Как работает object-fit: none
Значение none вообще никак не изменяет размер изображения.
Этот код выдаст в браузере следующий результат:
Если изображение больше доступного места, оно будет обрезано. В нашем примере некоторые части исходного изображения слева, справа, сверху и снизу не отображаются, потому что они не помещаются в границах заявленных ширины и высоты.
Как работает object-fit: scale-down
Значение scale-down будет отображать картинку либо как contain, либо как none – в зависимости от того, что именно выдаст наименьшее изображение.
Этот код выдаст в браузере следующий результат:
В этом примере изображение было уменьшено по принципу contain.
Как работают свойства object-fit и object-position
Если в результате object-fit выдает обрезанное изображение, оно по умолчанию будет центрировано. Для изменения точки фокуса можно использовать свойство object-position.
Вернемся к примеру object-fit: cover.
Теперь давайте изменим положение видимой части изображения по оси X, чтобы показать правый край изображения:
Этот код покажет следующий результат:
В этом примере фрагмент изображения с черепахой вырезан.
А теперь давайте посмотрим, что произойдет, если указать позицию за пределами доступного пространства:
В результате получится:
В этом примере изображение сдвинуто так, что мы видим только его левую часть. Кроме того, слева мы видим интервал, который составляет 20% доступного пространства.
Заключение
В этой статье мы рассмотрели доступные значения свойств object-fit и object-position.
Прежде чем использовать свойство object-fit в своем проекте, убедитесь, что ваша целевая аудитория пользуется браузерами, которые его поддерживают.
Как масштабировать изображения в CSS
Всяко лучше отдать это на откуп браузеру. И решена главная проблема, свойственная для «изображений, заполняющих пространство» — невозможности выбора части, задающей смысловую нагрузку (не говоря о том, что это иногда невозможно).
Спасибо! А то плохо получается, когда приходится резать изображения с текстом или групповые фото. Вписанные изображения наше всё)
Спасибо, Андрей! Мне этот способ тоже очень понравился, теперь буду широко его применять. Удобно и универсально.
Александр, первое, что пришло в голову – автоматическая массовая обработка имеющихся картинок в графическом редакторе, даже при тысячах картинок это вряд ли заняло бы времени больше, чем один рабочий день. Но через CSS – изящней. Единственное, что сразу бросилось в глаза при просмотре сайта – недостаточная высота контейнера под картинку и текст, больше двух строк уже не помещается. Просматривал через Файрфокс.
Мессенджер на сайте – от jivosite на платном тарифе? Или другой?
Константин, через Файерфокс и работаю… У меня это выглядит так:
Картинка кликабельна…
Но за инфу спасибо, в понедельник увеличу размер текстового блока.
Правда это не то, о чём я писал в статье. Вот как раз если кликнуть по любой из этих групп, то откроется страница, где я и внедрял показанный код. Например: здесь .
…автоматическая массовая обработка имеющихся картинок в графическом редакторе, даже при тысячах картинок это вряд ли заняло бы времени больше, чем один рабочий день
Была и такая мысль, но кто этим будет заниматься? Дизайнерша у нас сейчас одна и работы у неё завал, мне тоже не до этого – постоянно какие-то новые функции в программах надо писать, вся фирма работает на моей торговой программе, да и другого софта написано немало, всё востребовано, необходимо поддерживать, обновлять…
Живосайт на платном тарифе, тут несколько больше возможностей. Хотя долгое время сидели на бесплатном – тоже нормально, но одновременно может только один оператор быть.
На внутренние страницы я тоже заходил, там все замечательно ) А с Живосайтом на ИМ, который делал, не сложилось – заходы есть, вопросов нет ) Возможно, людям проще набрать телефонный номер, или сразу оформить онлайн-заявку, не знаю. Но в итоге от мессенджера на сайте отказались, чтобы не нервировал посетителей лишний раз )
Ну вроде подправил всё. Сегодня ночью очередное обновление выгрузится. По Живосайту – там же можно настроить всплывать или нет и при каких условиях. У нас много вопросов бывает, по три оператора одновременно сидят… Но бывает, что и затишье.
Саша, привет! Интересный способ, спасибо за науку. Правда не знаю воспользуюсь ли, но знать буду это точно
Ну поскольку ты сам делаешь шаблоны, то может и пригодиться… Способ отличный.
Всё таки это мужская работа – коды всякие! Половину не поняла…
Но почитать было интересно! Наверное, некоторые с таким же чувством читают мои статьи по здоровью… ��
Ну почему мужская? А как же эмансипация? А про здоровье, думаю, что каждый понимает только про свою болячку… Так, что у тебя вариантов быть понятой больше…
Ну, Галина, со здоровьем все проще
Лидия, Вы просто не писали по всех правилах статью по здоровью для вывода в топ! Это не сравнить ни с одной тематикой по величине текста при ПОЛНОМ раскрытии темы и если это НЕ рерайт! Я это знаю не понаслышке, так как у меня не один блог…
Саша, спасибо за background-size: contain; мне сразу это бросилось в глаза, я раньше ни у кого не видел такого обозначения размера, а вот cover встречался, но я не вникал в его функциональность, за ненадобностью. Пост классный получился и интересный, по крайней мере, для меня. Спасибо!
Миш, тут ведь как? Я ведь тоже сто раз проходил мимо и не вникал за ненадобностью… А вот возникла проблема и поиск ткнул меня носом в это решение. Ещё даже не поняв суть, я уже почувствовал – вот оно, то, что мне надо! Всю информацию просто невозможно вместить в голове. Мы её подгружаем по мере необходимости…
Привет, Саш! Вот и моя очередь подошла заниматься масштабированием картинок. Вопрос вот какой, как бы мне сделать, чтобы картинки в постах, особенно первые, масштабировались по ширине (по одной из сторон, например: 150px, но при этом, увеличивались бы при клике по ним?
Занялся оптимизацией картинок на Садоводстве, а мне сканер вот такую задачку задал, мол, нужно масштабировать в HTML и CSS. Вспомнил про тебя и твой вот этот пост. Но как бы мне сделать чтобы настройка действовала на все картинки сайта, а не только в таблице/блоке.
Есть что сказать?
Миш, думаю что-то можно сделать при помощи css… В том классе, который отвечает за изображение в постах прописать что-то типа max-width:150px;
Спасибо Саша, пожалуй, так и сделаю. У меня там изначально 100% и auto (стандарт). Посмотрю, что скажут сканеры на этот приём. Я попробовал через firebug 250px. В вёрстке темы вписано отображение картинки справа через определённое кол-во анонсов, т.ч. меньше 250px получается некрасиво, это нужно лезть отступы текста менять. Вообщем, глянем, спасибо за подсказку!
Саш, я попроще… Загляни, если не трудно, на sadvin.ru На главной странице изображения все разного размера визуально. Вот я и вспомнил твою статью о масштабировании. Хочу сделать, чтобы на главной все картинки были масштабированы, как ты предлагаешь по ширине 150 пикселей и высоте к примеру, 180 рх, а на странице поста я обычно уменьшаю за уголок до 550 рх по ширине, а увеличивает их до оригинала плагин.
Честно говоря, я так до конца и не понял твоей задачи… Разве изображения в статьи ты не руками вставляешь? Можно ведь просто за уголок потянуть и изменить размер на любой, нужный тебе. При этом само изображение не изменится, только его отображение…
Да, именно так всё и происходит, причём, картинка не из библиотеки, а только ссылка с хранилища. Но, картинки имеют большой размер и сканер читает именно его, а не отображаемый. У меня же в настройках Медиа все нули стоят, а сканеру это не нравится видимо и мне говорит, что нужно картинки оптимизировать, указывая чаще на те картинки, которые отображаются в анонсах. Ну вот например:
_THQ05aTyc1iCD9yqwCM9kvouM5O0ea7g…
DqoPpK6juu7s=w300-h358-no?.jpg изменяется в HTML или CSS от 300×358 до 100×119.
Обслуживая масштабируется изображение может сохранить 16.1KiB (снижение 88%).
Странно… А у меня сканнер на сторонние картинки вообще внимания не обращает. Видимо дело в том, что мои сервисы хранения картинок уже сами сжимают их при загрузке, не меняя размеров. Так делал и Радикал, но сейчас я им не пользуюсь, но вроде так делает и postimage.org , которым пользуюсь в настоящее время. Он, кстати, отдаёт картинки по https, что для меня очень важно…
Саша, а на главной странице этого сервиса хранения картинок написано, что загружать можно только семейные фото. А что, снимки фрагментов экрана не котируются? Нельзя такого типа картинки хранить у них?
Миш, у меня все картинки там. Чем мы, блогеры, не семья?
Будет желание, загляни ко мне, я там новую версию о безопасности блога выложил. Старая песня на новый лад.
Если ты о закрытии автора, то заглянул и ответил… У меня на это несколько иной взгляд..
Спасибо, Саш! Мне было важно твоё мнение! Теперь у меня закрался вопрос, что же открывает эта ссылка? Возможно когда-нибудь я и отвечу себе на этот вопрос.
Мне кажется, что моя версия правильная…
Солидарна с Галиной, хотя не считаю, что писать коды – это только мужская работа, некоторые женщины в этом тоже хорошо разбираются, я правда не из их числа. К сожалению css, html-коды для меня тёмный лес, сама ничего не придумаю, разве что при необходимости чужой совет применю на сайте.
Кстати, как раз хочу спросить совета по поводу изображений. Может, кто с этим тоже столкнулся. После обновления Wordpres до версии 4.5. появились проблемы с загрузкой изображений в библиотеку медиафайлов и соответственно в запись. Выскакивает вот такая ошибка: "Во время загрузки произошла ошибка. Пожалуйста, повторите попытку позже". А позже тоже самое. Но через время в библиотеке появляется изображение только без миниатюры. Уже из библиотеки изображение можно вставить в запись, правда миниатюра фотки в рубриках так и не появилась. Функция вставки изображений с другого сайта работает без проблем. Но этот вариант для получения миниатюр в анонсах и рубриках не подходит.
Валентина, вот не подскажу ничего – у меня таких проблем нет. Хотя WordPress обновил. Единственное, что приходит в голову – это то, что обновление как-то криво установилось. Попробуйте переустановить. Это можно сделать прямо из консоли: