Как я могу изменить источник изображения, когда изображение становится меньше определенного размера?

У меня есть веб-страница с боковой панелью. Вверху логотип. Когда боковая панель сворачивается (становится меньше), логотип становится меньше вместе с ней. Вместо этого я хотел бы перейти (анимировать) на другой логотип.

Таким образом, более крупный логотип по существу исчезнет в другой логотип.

Я хотел бы сделать это с помощью CSS или JQuery, хотя я не эксперт. Так что мне было интересно, если кто-нибудь может мне помочь?

Когда он становится маленьким, и вы можете видеть только CT, я хотел бы изменить логотип.

Пример:

Источник

3 ответа

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

Например:

.box {
  width: 141px;
  height: 100px;
  transition: 500ms;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -ms-transition: 500ms;
  -o-transition: 500ms;
  background-image: url(images/picture.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media only screen and (min-width:800px) {
  .box {
    background-image: url(images/gym.png);
  }
}
<body>
  <div class="box"></div>
</body>

Источник

Хотя это возможно с чистым CSS, это проще с jquery, Вот пример

$('.logo-btn').click(function() {
    $('.logo-large').toggleClass('hide');
});
nav {
  height: 60px;
  background: #f7f7f7;
  display: flex;
  align-items: center;
}

nav > span {
  height: 100%;
  display: flex;
  align-items: center;
  background: #2b2b2b;
  width: fit-content;
  padding: 0 40px;
  color: white;
  font-size: 1.2em;
  transition: all 500ms ease;
  white-space: nowrap;
}

.hide {
  width: 0;
  padding: 0;
  opacity: 0;
}

button {
  margin-left: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <span>CT</span>
    <span class="logo-large">Creative Tim</span>
    <button class="logo-btn">click me</button>
</nav>

Конечно, вы можете поиграть и настроить CSS, чтобы сделать анимацию более плавной.

Источник

Вы можете использовать свойство "content" CSS. Когда боковая панель свернется, вы можете установить новый URL меньшего логотипа и использовать переход для анимации изменения.

Я надеюсь, что это поможет вам. С наилучшими пожеланиями, Эмануэле

Источник
Другие вопросы по тегам