В прошлый понедельник я планировал научиться трем вещам: подгонке изображений под размер браузера, созданию HTML-таблиц и уменьшению яркости фоновых изображений. Я делал только первые два.

CSS — кошмар каждого веб-разработчика. Я все чаще сталкиваюсь с этими словами всякий раз, когда говорю своим друзьям-программистам, что начинаю изучать HTML и CSS. Я сталкивался с проблемами стиля, боролся и часами пытался найти проблемы. Я гуглил решения от людей, которые сталкивались с проблемой раньше и решили ее, и к концу дня почти не добился прогресса.

Вот где я был два дня назад.

Моя девушка верит в жесткую любовь, когда дело доходит до обучения. Пожалуйста, не заблуждайтесь: она не имеет абсолютно никакого отношения к чертам CSS. Она такая же милая, как и они. Но она считает, что если она будет кормить меня этим с ложечки, я почти не продвинусь в обучении. Так что, хотя я ненавижу это, я так понимаю.

Сначала я думал, что ее помощь пригодится, когда я застряну. Я имею в виду, я думал, что она наклонится, посмотрит на экран VS Code один или, может быть, два раза и скажет мне, что напечатать, чтобы решить мою проблему.

Когда я попросил изменить размер изображений, чтобы они подошли к окну браузера, ее инструкция была довольно краткой. «Нацельтесь на класс изображения и присвойте ему атрибуты. Это должно решить проблему для всех изображений». И она ушла по делам. Затем, у двери, она добавила: «…сделай Google своим другом».

Теперь, как, черт возьми, новичок должен понять все это и изменить размер изображений, которые теперь были слишком большими, чтобы поместиться на экране?

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

Изменение размера изображений

Когда я начинаю уроки HTML/CSS и делаю упражнения по созданию базовых веб-страниц, я сталкиваюсь с проблемой того, что изображения, которые я хотел включить в свою страницу, переполняются (часто растягиваются таким образом, что превышают размер моего экрана). Сейчас я почти на 100% уверен, что кто-то где-то борется с этой проблемой.

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

Во-первых, я использовал тег ‹img›, чтобы добавить изображение, которое я хотел включить на свой сайт, в HTML, используя приведенный ниже пример:

Во-вторых, поскольку изображение, скорее всего, будет большого размера, в CSS я стилизовал его, задав свойства элемента ‹img›:

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

Недостатком прямого стиля тега ‹img› является то, что стиль применяется ко всем экземплярам, ​​где используется ‹img›.

Чтобы решить эту проблему, создайте класс, как показано ниже, и определите свойства с одинаковыми значениями максимальной ширины и максимальной высоты (100%).

Чтобы изменить размер определенных изображений, примените указанный выше класс к тегу ‹img›.

Фоновая картинка

Второе, чему я научился, — это как разместить фоновое изображение на второй тренировочной веб-странице, которую мне назначила моя девушка. Но, опять же, шесть часов подряд я не мог понять, что делать.

Мой онлайн-поиск подсказок по изменению размера этого фонового изображения дал результат после того, как я наткнулся на полезный материал.

Я нацелился только на элемент html — я не включил элемент body — сосредоточился на свойстве background-size и установил его ' cover», как показано на снимке кода ниже:

Значение center означало, что изображение будет расположено в центре содержащего его элемента.

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

Таким образом, значение cover помогло!

Существует несколько способов подгонки фонового изображения к контейнеру, например, длина, содержание, авто, и процент, как описано в MDN!

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