Fading Галерея изображений

У галереи изображений, у меня есть проблемы с созданием какого-то пространства справа, когда зритель меньше, чем 350px, оставляя пробел на всей правой стороне моего сайта. Я пытаюсь сделать эту галерею изображений отзывчивой, чтобы каждая вещь изменялась в зависимости от размера зрителя.Fading Галерея изображений

Вот код:

CSS

.crossfade > figure { 
    animation: imageAnimation 30s linear infinite 0s; 
    backface-visibility: hidden; 
    background-size: cover; 
    background-position: center center; 
    color: transparent; 
    height: 50%; 
    opacity: 0; 
    margin-left: 0px; 
    margin-top: 0px; 
    position: absolute; 
    width: 100%; 
    left: -1px; 
    z-index: 0; 
    border: thin solid black; 
} 

.crossfade > figure:nth-child(1) { 
    background-image:url(001.jpg); 
} 
.crossfade > figure:nth-child(2) { 
    animation-delay: 6s; 
    background-image:url(002.jpg); 
} 
.crossfade > figure:nth-child(3) { 
    animation-delay: 12s; 
    background-image:url(003.jpg); 
} 
.crossfade > figure:nth-child(4) { 
    animation-delay: 18s; 
    background-image:url(004.jpg); 
} 
.crossfade > figure:nth-child(5) { 
    animation-delay: 24s; 
    background-image: url(005.jpg); 
} 

@keyframes imageAnimation { 
    0% { 
    animation-timing-function: ease-in; 
    opacity: 0; 
    } 
    8% { 
    animation-timing-function: ease-out; 
    opacity: 1; 
    } 
    17% { 
    opacity: 1 
    } 
    25% { 
    opacity: 0 
    } 
    100% { 
    opacity: 0 
    } 
}

HTML

<body> 
<figure class="crossfade"> 
    <figure></figure> 
    <figure></figure> 
    <figure></figure> 
    <figure></figure> 
    <figure></figure> 
    </figure> 
</body>

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

источник

2016-06-29 Warlo

В чем проблема с кодом? – makshh

Как я уже сказал, когда я помещаю этот код на свой сайт, он, кажется, реагирует странно, создавая примерно 100 пикселей на правой стороне веб-сайта. Если я выберу этот код, он выглядит отлично. С картинной галереей идет сенная проволока :( – Warlo

Вы должны показать больше кода. Я проверил ваш код, и я не вижу никакого пробела. – makshh

Прежде всего, ваши метки <figure> имеют поля. Это необходимо?
Если нет, то добавьте в ваш figure CSS: margin: 0px;

Во-вторых, вы имеете в виду этот пробел?

Если да, то ваше название переполнена здесь.

Чтобы исправить это, уменьшите font-size или используйте javascript для изменения размера шрифта в соответствии с шириной страницы.

EDIT: Вы можете добавить это к вашему <head> тегу:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">

затруднительных проблем масштабирования на мобильных браузерах, но убедитесь, что ваш шрифт является достаточно большим, поскольку он отключает масштабирование.

Извините, если я немного не по теме. Я просто хочу совершенствовать все, над чем я работаю.

источник

2016-06-30 03:25:46

Это пробел, о котором я говорил. Я проверю заголовок страницы, а также тег

, чтобы узнать, являются ли эти проблемы. Я убежден, что это галерея изображений, но это похоже на возможности, Спасибо, я еще раз прокомментирую любые выводы. – Warlo

@Warlo Что случилось? Помогло ли это решить проблему? –

@Warlo Еще одно предложение. Если вы хотите быстро и грязно исправить, вы можете пойти 'overflow-x: hidden;' в вашем css для тега ''. –

Fading Галерея изображений

ответ

Смежные вопросы