• Растягиваются изображения при flex-wrap:wrap. Как это исправить?

    Если изображения растягиваются при использовании свойства flex-wrap: wrap; в комбинации с display: flex;, можно попробовать следующие способы исправить данную проблему:

    1.Установить свойство flex-shrink: 0; для изображений. Это предотвратит их растягивание.
    .about__partners-gallery img {
      flex-shrink: 0;
    }

    2.Указать фиксированную ширину для изображений. Например, если вы хотите, чтобы каждое изображение занимало 25% ширины контейнера
    .about__partners-gallery img {
      width: 25%;
    }

    Применение одного из этих способов должно помочь предотвратить растягивание изображений при использовании flex-wrap: wrap;.
    Ответ написан
    7 комментариев
  • Как сохранить якорные ссылки при плавном скролле?

    Или как вариант.я
    Код взаимствован с другого источника.
    1.При клике на якорную ссылку, добавьте обработчик события, который предотвращает переход по ссылке по умолчанию (чтобы не прервать плавный скролл).
    2.Когда происходит плавный скролл и достигается цель, history.pushState() используется для обновления URL с якорем.

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        // Получите якорь из href атрибута ссылки
        const target = document.querySelector(this.getAttribute('href'));
        
        // Плавно прокрутите до цели
        target.scrollIntoView({ behavior: 'smooth' });
        
        // Обновите URL с якорем
        history.pushState({}, '', this.getAttribute('href'));
      });
    });
    Ответ написан
    Комментировать
  • Как сделать место для загрузки изображения?

    Если я правильно понял вопрос. Возможно так реализовать.
    (JavaScript код не обязателен для стилизации элемента загрузки файла.он может быть полезен, если вы хотите предоставить пользователю обратную связь)



    <input type="file" id="imageUpload" name="imageUpload" accept="image/*">


    input[type="file"] {
        display: none;
    }
    
    label {
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        cursor: pointer;
    }
    
    label:hover {
        background-color: #45a049;
    }
    Ответ написан
    Комментировать