Nano Hash - криптовалюты, майнинг, программирование

Изображение в процессе перехода не соответствует объекту: обложка;

«Привет, Stackoverflow!

Мне интересно, может ли кто-нибудь помочь мне разобраться в этом. Я нашел эту программу просмотра изображений «До/После» от Джейсона Мэйса и работал над тем, чтобы она была отзывчиво центрирована.

Итак, я нашел «подходящий объект: обложка»; и «позиция объекта: 50% 50%;» работать отлично, но вскоре я понял, что сам переход каким-то образом не был оформлен таким образом.

Я раздвоил ручку Джейсона, чтобы вам было понятнее: http://codepen.io/RogerAntonio/pen/rVXrma

Я думаю, что проблема кроется где-то здесь:

.container img {
  object-fit: cover;
  object-position: 50% 50%;
  overflow: hidden;
}

.beforeAfter .before {
  z-index:2;
  opacity: 1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

Заранее спасибо!

25.08.2015

Ответы:


1

Поддержка этих свойств объекта невелика. Я бы попробовал использовать встроенные фоновые изображения в промежутках или div, а затем установить высоту.

<span class="image before" style="background-image:url('http://www.abc.net.au/news/linkableblob/5272894/data/view-of-independence-square-in-kiev-data.jpg')" />
<span class="image after" style="background-image:url('http://www.abc.net.au/news/linkableblob/5272868/data/site-of-anti-government-protest-in-kiev-data.jpg')" />

http://codepen.io/Hexl/pen/waVEKL

25.08.2015
  • Это работает для меня! И это должно работать в IE (там не поддерживается объектная подгонка). Мне пришлось еще кое-что изменить, чтобы информация всегда была на высоте, но это работает! Благодарю вас! 25.08.2015

  • 2

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

    .container img {
      width: 100%;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    

    Вам нужно будет игнорировать свои стили, чтобы некоторые другие избыточные объявления не переопределяли позиционирование. Возможно, вам потребуется добавить некоторые префиксы поставщиков, чтобы это работало в разных браузерах. Здесь немного изменена скрипт

    25.08.2015
  • Спасибо, Erkki, все выглядит хорошо, пока вы не уменьшите размер окна. Я собираюсь использовать метод Адама, но все равно спасибо за ваш вклад! 25.08.2015
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

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

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

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

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..