Изображения меняются при обновлении страницы sh

Question

Я делаю сайт для друга, который занимается цифровым искусством. Этот человек хочет, чтобы изображения прокручивались по экрану как шатер, но с изображениями, однако, я столкнулся с досадной ошибкой. Каждый раз, когда я обновляю sh страницу, изображения меняются. Иногда это так, как я хочу, чтобы это было так, но иногда это неправильно.

Это изображения, о которых я говорю:

Неправильное

Правильный

Вы можете сами убедиться на моем сайте: https://www.kevs.website/art/

Это HTML код:

<div class="preve">
    <img src="images/image0.jpg" class="preveimg">
    <img src="images/image1.jpg" class="preveimg">
    <img src="images/image2.jpg" class="preveimg">
    <img src="images/image3.jpg" class="preveimg">
    <img src="images/image0.jpg" class="preveimg">
    <img src="images/image1.jpg" class="preveimg">
    <img src="images/image2.jpg" class="preveimg">
    <img src="images/image3.jpg" class="preveimg">
</div>

Это CSS код:

.preveimg {
height: 493.150685px;
width: 500px;
animation: sc-left 20s linear infinite;
background-repeat: no-repeat;
background-size: cover;

}

.preve {
display: flex;

}

Код может быть любительским, потому что я только начал некоторое время go.

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

Answer 1

Проблема, похоже, заключается в том, что display: flex пытается сжать все ваши изображения в широкоэкранном .preve div, а также свойство width CSS и / или тот факт, что ваши изображения занимают время загружать из-за их веса.

Чтобы решить ваш случай, я просто добавил flex-shrink: 0, он говорит flex не сжимать содержимое и сохранять его фактический размер.

.preve {
  display: flex;
}

.preveimg {
  height: 493.150685px;
  width: 500px;
  animation: sc-left 20s linear infinite;
  background-repeat: no-repeat;
  background-size: cover;
  flex-shrink: 0; //Just added this, seems to work out
}

@keyframes sc-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-400%);
    }
}

<div class="preve">
    <img src="https://www.kevs.website/art/images/image0.jpg" class="preveimg">
    <img src="https://www.kevs.website/art/images/image1.jpg" class="preveimg">
    <img src="https://www.kevs.website/art/images/image2.jpg" class="preveimg">
    <img src="https://www.kevs.website/art/images/image3.jpg" class="preveimg">
    <img src="https://www.kevs.website/art/images/image0.jpg" class="preveimg">
    <img src="https://www.kevs.website/art/images/image1.jpg" class="preveimg">
    <img src="https://www.kevs.website/art/images/image2.jpg" class="preveimg">
    <img src="https://www.kevs.website/art/images/image3.jpg" class="preveimg">
</div>

Альтернатива

Если это не сработает, добавление min-width: 500px; также работает, но это не свойство flex-относительного свойства , это может вызвать побочные эффекты.