Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Добавление картинки в код</a></li>

2 <li><a>Работа с атрибутами</a><ul><li><a>Сохранение соотношения сторон при корректировании размера рисунка</a></li>

3 </ul></li>

4 <li><a>Адаптивное изображение</a></li>

5 <li><a>Размещение в области элемента</a><ul><li><a>Изменение размеров через фоновые изображения</a></li>

6 <li><a>Свойство object-fit</a></li>

7 </ul></li>

8 </ul><p>Каждый веб-разработчик должен разбираться не только в HTML для создания своих проектов, но и в CSS. Этот инструмент помогает формировать детализированные и эффектные страницы, оснащенные разнообразной графикой и эффектами.</p>

9 <p>При работе с изображениями в HTML CSS имеет огромную значимость. Сегодня предстоит познакомиться с соответствующей операцией. Отдельное внимание будет уделено корректировке ширины и высоты картинки на экране.</p>

10 <p>Предложенная ниже информация пригодится широкому кругу лиц. Она подойдет для изучения как обычными ПК-пользователями, так и веб-программистами/дизайнерами. Опубликованные сведения - это основа работы с изображениями в HTML-коде через CSS.</p>

11 <h2>Добавление картинки в код</h2>

12 <p>HTML используется для формирования общей структуры веб-страницы или онлайн-сервиса. Перед тем как начать работать с размерами картинок на сайте, нужно сначала добавить их. Для этого используется тег <img>. Ширина и высота указываются в качестве атрибутов изображения. Эта информация прописывается разработчиком в пикселях.</p>

13 <p>Вот пример синтаксиса добавления нового изображения на страницу:</p>

14 <p>Здесь:</p>

15 <ol><li>Src - исходный код. Каждая картинка в HTML-коде поддерживает этот атрибут. С его помощью можно передать браузеру информацию о том, где искать необходимое для дальнейшей работы изображение. URL здесь - это местоположение картинки.</li>

16 <li>Alt. Атрибут, который позволяет создать альтернативное описание для картинки. Используется, если изображение не может по тем или иным причинам отобразиться на странице. Значение данного атрибута - это текст, который заранее определяется пользователем. Он выступает своеобразной подписью.</li>

17 </ol><p>Теперь, когда добавление рисунка на страницу закончено, можно перейти к корректировке его масштаба. В HTML существуют различные способы, с помощью которого верстальщик или разработчик изменяет высоту и ширину изображения. Далее эти приемы будут изучены более детально.</p>

18 <h2>Работа с атрибутами</h2>

19 <p>Ширина и высота рисунка, размещаемого в HTML-коде, могут быть заданы и скорректированы при помощи атрибутов. К ним относят:</p>

20 <ul><li>width - ширина;</li>

21 <li>height - высота.</li>

22 </ul><p>По умолчанию значения соответствующих атрибутов указываются в пикселях. Можно также задавать подобные параметры в процентах от "родительской" картинки.</p>

23 <p>Если у рисунка задана только ширина или высота, то второй параметр будет вычисляться автоматически. Во внимание система возьмет пропорции исходного изображения. Два заданных параметра высоты и ширины могут исказить реальную картинку и ее пропорции, особенно если они задаются неправильно.</p>

24 <p>Если же верстальщик использует картинку без заданных width и height, она отобразится с исходными параметрами. Вот синтаксис корректировки ширины и высоты рисунка через атрибуты:</p>

25 <p>Верстальщику необходимо запомнить следующие обозначения и их значения:</p>

26 <ol><li>Px: pixels - используется для обозначения размеров в пикселях. Это 1/96 дюйма.</li>

27 <li>In: inches - используется для работы с дюймами. Это 96 пикселей или 2,54 сантиметра.</li>

28 <li>Pt: points - используется для указания размеров в точках. Точка - это 1/72 дюйма.</li>

29 </ol><p>Чтобы установить рисунок на всю ширину браузерного окна, рекомендуется использовать задание масштаба в процентах от ширины родительского (начального) изображения. </p>

30 <h3>Сохранение соотношения сторон при корректировании размера рисунка</h3>

31 <p>Искажения при неправильно заданных параметрах ширины и высоты рисунка в HTML-коде - распространенное явление. Картинка может потерять соотношение сторон, особенно если верстальщик не уделил расчетам width и height достаточного времени.</p>

32 <p>Соотношение сторон можно сохранить. Для этого рекомендуется использовать только атрибут width с конкретными параметрами. Для height нужно использовать свойство CSS - auto. Оно пишется в качестве значения атрибута.</p>

33 <p>Обратный принцип тоже действует. Это значит, что верстальщик может указать только атрибут height, а для width установить значение auto. Данный прием является не самым распространенным. Это связано с тем, что основная масса макетов ограничивается шириной, а не высотой.</p>

34 <h2>Адаптивное изображение</h2>

35 <p>При помощи указания ширины и высоты рисунка в процентах вместо абсолютных значений можно сделать его адаптивным. В этом случае изображение будет подстраиваться под необходимые параметры системы.</p>

36 <p>Если указать у атрибута width значение 100 %, картинка будет масштабироваться по мере необходимости. Происходить это будет с учетом соответствия ширины родительского (начального) рисунка. Данный прием способен привести к "размытости". Соответствующее явление вызвано тем, что рисунок может быть масштабирован до размеров, которые превышают исходные параметры картинки.</p>

37 <p>В качестве альтернативного решения допустимо использовать свойство CSS под названием max-width. Ему нужно установить значение 100 %. Картинка уменьшится, если в этом есть необходимость. А вот увеличение до размеров, которые превосходят исходные параметры, не произойдет ни при каких обстоятельствах. Для более корректного автоматического масштабирования рекомендуется использовать max-width 100, а height - auto.</p>

38 <h2>Размещение в области элемента</h2>

39 <p>Бывают ситуации, когда верстальщику требуется сохранить изначально соотношение сторон, пока рисунок покрывает всю область, даже если какая-то его часть обрезана. Для этого допустимо использовать несколько приемов:</p>

40 <ul><li>фоновое изображение;</li>

41 <li>CSS-свойства object-fit.</li>

42 </ul><p>Далее соответствующие концепции будут рассмотрены более подробно. Эта информация будет полезна не только опытным верстальщикам, но и новичкам.</p>

43 <h3>Изменение размеров через фоновые изображения</h3>

44 <p>У CSS есть достаточно мощное свойство - background-image. Оно дает возможность вставлять рисунки в элементы, которые отличаются от img. С помощью данного свойства получится управлять масштабированием рисунка, а также его обрезкой. Для этого применяются такие атрибуты как:</p>

45 <ul><li>background-size - размер рисунка;</li>

46 <li>background-position - начальная позиция фонового изображения.</li>

47 </ul><p>По умолчанию фоновое изображение отображается в исходном полном размере. Переопределение осуществляется через первый в списке атрибут. Масштабирование поддерживается сверху или снизу - на усмотрение верстальщика.</p>

48 <p>Данное свойство может иметь такие значения как:</p>

49 <ul><li>auto - отображение рисунка в полном размере;</li>

50 <li>length - установка ширины и высоты в пикселях;</li>

51 <li>percentage - установка высоты и ширины в процентах от родительского рисунка.</li>

52 </ul><p>Также у background-size есть два специальных значения: contain и cover. Первое используется для сохранения соотношения сторон рисунка, но размер изображения изменяется так, чтобы оно было полностью видимо. Наибольшая высота или ширина будет соответствовать заданным размерам, независимо от "габаритов" содержащего поля.</p>

53 <p>Cover используется для сохранения соотношения сторон, но с изменением размера картинки так, чтобы оно покрывало весь контейнер. Это должно происходить, даже если для реализации задачи потребуется увеличить рисунок или обрезать его.</p>

54 <h3>Свойство object-fit</h3>

55 <p>У элемента img есть CSS-свойство object-fit. Оно используется для указания того, как рисунок должен меняться в размерах и обрезаться, чтобы соответствовать имеющемуся контейнеру.</p>

56 <p>Object-fit предусматривает следующие ключевые значения:</p>

57 <ol><li>Contain. Отвечает за сохранение исходного соотношения сторон, но рисунок будет менять размер так, чтобы он был виден полностью. Наибольшая высота/ширина соответствует заданным параметрам, независимо от размеров содержащего его поля.</li>

58 <li>Cover. Используется для сохранения соотношения сторон картинки. Ее размер будет меняться так, чтобы он полностью охватывал контейнер. Операция происходит даже при необходимости увеличения масштаба или обрезки изображения.</li>

59 <li>Fill. Значение по умолчанию. Картинка будет заполнять всю указанную верстальщиком область. Принцип действует даже тогда, когда подобное размещение приводит к потере пропорций.</li>

60 <li>None. Размер изображения меняться не будет. Его исходные параметры позволяют заполнить все указанную область.</li>

61 </ol><p>Рекомендуется использовать object-position для управления начальными позициями рисунка, когда рендерится обрезанная часть изображения.</p>

62 <p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>!</em> </p>