В прошлый понедельник я планировал научиться трем вещам: подгонке изображений под размер браузера, созданию 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!
До сих пор я горжусь своими маленькими шагами, и два урока, которые я усвоил на этой неделе, какими бы утомительными и пугающими они ни были, будут полезны в будущем.