Как правильно указать размеры картинки в swiper slider?

cracker-test, нужно открыть справочник https://developer.mozilla.org/ru/docs/Web/CSS/back... и выбрать подходящее значение. Я не знаю, какое вам нужно, потому что вы не рассказали как именно она должна подстраиваться.

Как правильно указать размеры картинки в swiper slider?

Размер фоновой картинки регулируется свойством background-size.

Когда я указываю высоту и ширину картинки 100%

Вы задаете размера блока, а не картинки.
Если проценты считать не от чего, то блок становится нулевого размера. Ширина у него, скорее всего, остается по ширине блока слайдера. а высота становится нулевой.

Соответственно, вам нужно определиться, что от чего зависит. Блок от картинки, картинка от блока или они вместе от размеров слайдера или от каких-то пропорций и т.д. В общем, самая простая геометрия.
А потом всё это записать в CSS.

Как правильно формулировать классы по бэм?

https://ru.bem.info/methodology/redefinition-levels/

Как правильно писать css c помощью sass по БЭМ?

и там мне очень понравилась вложенность, везде ее лепил то-есть структура css у меня получилась такая же как и в html

Так делать не стоит ни в CSS ни в препроцессорах.
Большая вложенность приводит к повышению специфичности, а значит, к потенциальным проблемам при переопределениях.
БЭМ как раз заметно сокращает потребность во вложенностях.
Если у вас есть элемент .block__elem, то уже и так понятно, что он лежит в блоке .block и больше нигде.
Это #details-bouncy #details-bouncy-markers div, конечно жестоко. Вы попросили браузер найти сначала все div на странице, потом проверить лежат ли они в #details-bouncy-markers. Это уже не лучший ход. Так потом ещё нужно пойти выше по дереву и проверить, лежит ли это всё в #details-bouncy.
Вместо этого можно было бы задать одинаковый класс этим div и использовать простой селектор типа .class {}. Ну или в БЭМ версии .block__elem {}
Ну кроме того, что эти картинки вообще не контентные, а украшения. А украшения делают фонами и/или псевдоэлементами с помощью стилей.

так же я использовал очень много id что тоже не верно?

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

p.s.
1. Вы смотрели свой сайт при ширине окна больше макетной? Есть прелюбопытные моменты.
2. Высоту в верстке задают очень редко. Мы никогда не знаем сколько будет контента. Используйте отступы и/или мин макс высоту, если она зачем-то нужна.
3. Не забывайте проверять код валидатором.
4. <h2>O U R&nbsp;&nbsp;&nbsp;S E R V I C E S</h2>
В разметке текст хорошо бы писать так, чтобы его нормально могли прочитать экранные дикторы. Представьте, как может быть прочитан вот этот.
Для увеличения расстояния между буквами есть свойство letter-spacing.
5. Ну и т.д. про семантику, контентные картинки и украшения, лишние теги... Хватит пока.

А для гитхаба сделайте отдельный вопрос, не стоит мешать всё в кучу.

Как изменить размер SVG-картинки в CSS?

Divviner, тогда всё отлично :)

После отправки формы сайт начинает ломаться, как это исправить?

DaniilPo,

что она по идее чиста

покажите кусок кода, который отвечает за эту идею.

После отправки формы сайт начинает ломаться, как это исправить?

DaniilPo,

и к тому же то сообщение возникающие при попытки обновить страницу никуда не исчезнет в таком случае

Нет, конечно, не исчезнет, это браузерное оповещение. Очищайте поля после успешной отправки.

Как прописать классы в php коде?

Атрибуты в HTML пишутся в кавычках

И это class=height:70px; вообще не класс, а style.

После отправки формы сайт начинает ломаться, как это исправить?

Скорее всего незакрытые или лишние теги.
Проверьте страницу валидатором и исправьте ошибки.

Как передавать в переменной CSS значение свойства inherit?

Михаил Р., нет, вы уже в root пытаетесь сказать, что нужно взять предыдущее значение. А его нет и быть не может.

Лучшее время дня для усвоения / запоминания новой информации — какое оно?

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

Как сделать высоту картинки равной его ширине?

poshuriku, изучите свойство object-fit, пожалуйста.
Как задать пропорции блоку я уже тоже написала.

У вас вообще нет обертки вокруг картинки (figure, div)

Как убрать белую полосу?

John Jameson, проверять чтобы файлы были в utf-8 без BOM

Как сделать высоту картинки равной его ширине?

1. Используете aspect-ratio если позволяет ТЗ. Если нет, гуглите "css пропорции хак с паддингом".
В итоге делаете ваш блок квадратным.
2. Чтобы вписать картинку, используете object-fit.
Тут есть два пути: абсолютом или гридами.

Как сделать так, чтобы отступ не уходил в отрицательное значение?

вероятно, эта функция тупо не работает

Привет учителю математики.
Действительно странно, почему получается 0, если второе число отрицательное при ширине меньше 1300...

Если бы вы хотя бы приложили картинку, то нам было бы легче понять, что вы там творите.

Пока похоже, вам нужно, чтобы текст был по центру. Но не знаете про margin auto и свойство padding. Но у шарика сегодня выходной, работает не очень.

Что использовать при позиционировании элементов: margin или position relative?

Если они стоят по центру, то банальное texl-align: center спасет всех, кроме кнопки.
Ей можно display: block, width: fit-content и горизонтальные margin в auto.

Альтернатива: гриды или флексы.

Как правильно сверстать?

Как правильно

эти картинки, у всех разные размеры

Шепотом: сделать одинаковыми.

Правда, они все прибиты к правому краю, так что можно и просто object-fit

Как сделать чтобы внутренний блок не выходил за пределы внешнего?

Ответ не легко ищется поисковиком т.к. не понятно, какое свойство гуглить!

Гриды, тогда можно будет перестать лепить абсолюты.

Как вывести фото новости разного размера компонентом news.list?

Андрей Кузнецов, чтобы узнать что и почему у вас не работает, нужно сделать песочницу.

А не давать стили отдельно от разметки.

Как следующему элементу добавлять/удалять класс?

Slick и так добавляет классы активным слайдам