I столкнулся с проблемой. Я пытаюсь создать полноэкранный слайдер изображений с адаптивными изображениями. Я пробовал все комбинации: Добавить стиль высота: 100%, ширина: 100%, высота: авто, ширина: авто в HTML в CSS, но ничего не работает. Я покажу вам код, возможно, я сделал что-то не так. Я не могу добавить фрагмент кода, потому что он не отображает изображения, и это много кода и классов. Эта проблема сводит меня с ума, я ищу решение в течение 4 часов.
HTML
<div id = "showcase">
<div id = "arrow-left" class = "arrow"></div>
<div id = "slider">
<div class = "slide slide1"></div>
<div class = "slide slide2 "></div>
<div class = "slide slide3"></div>
</div>
<div id = "arrow-right" class = "arrow"></div>
</div>
CSS
#showcase,
#slider,
.slide-content {
height: 100vh;
width: 100%;
overflow-x: hidden;
}
#showcase {
position: relative;
height: 100%;
width: 100%;
}
.slide {
width: 100%;
height: 100%;
}
.slide1 {
background: url(/Core/img/lazar1.jpg) no-repeat center center/cover;
}
.slide2 {
background: url(/Core/img/lazar2.jpg) no-repeat center center/cover;
}
.slide3 {
background: url(/Core/img/lazar3.jpg) no-repeat center center/cover;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -50px;
border-style: solid;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent blue transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right {
border-width: 30px 0 30px 40px;
border-color: transparent blue transparent blue;
right: 0;
margin-right: 30px;
}
Да, не работает.
Извините, я хотел бы лучше понять, что происходит на вашей странице, которая не работает. Не могли бы вы рассказать о проблеме немного подробнее? Изображения не отображаются на весь экран? Они выходят искаженными?
Нет, они появляются, но размер изображений не меняется, когда страница становится меньше. Я перепробовал все методы, чтобы сделать их отзывчивыми, но ничего не работает. Я хочу скопировать сайт LazarAngelov.com. Пожалуйста, посмотрите там
Ok. Я скопировал ваш код в свой браузер и использовал несколько тестовых изображений (потому что у меня нет доступа к вашему). Единственное, что я изменил, это то, что я установил единицы вашего класса .slide
на vw
и vh
для ширины и высоты, и изображения (для меня) появляются на весь экран и масштабируются соответствующим образом, когда я изменяю размер окна. Я знаю, вы сказали, что пробовали это раньше, но во всех комбинациях вы могли пропустить это. Можете ли вы попробовать это и дайте мне знать, если это работает?
Я отредактировал сообщение и скопировал некоторые изображения, пожалуйста, посмотрите.
Мое последнее предложение не сработало?
Извините, только что увидел. В вашем коде должно быть что-то лишнее (либо HTML, либо CSS), чего нет в моем, что мешает этому. Я посмотрю более внимательно на ваш пример. Тем не менее, я озадачен, почему это работает для меня, а не для вас.
Хорошо, извините за все вопросы (даже если некоторые глупые), я просто пытаюсь рассмотреть все возможности. Во-первых, вы не забыли добавить тег окна просмотра <meta>
? Во-вторых, какого размера (в пикселях) изображения, которые вы используете? И, наконец, что произойдет, если вы используете vw
для высоты, а не для ширины?
в моем коде ничего нет, я проверил кодовой ручкой, и кодовая ручка дает мне то же самое
когда я изменяю размер из угла, это не работает. Также большое спасибо за ваши усилия
Без проблем. Кажется, я вижу, что происходит - когда страница сжимается по ширине, изображение начинает сжиматься. Как только изображение сжимается до исходной высоты, оно перестает сжиматься, и ширина начинает переопределяться. Вопрос в том, почему. Я немного поиграюсь с codepen и посмотрю, смогу ли я что-нибудь придумать.
Понятно. Я действительно должен был подумать об этом раньше. Сайт, который вы используете в качестве примера, использует медиа-запросы для уменьшения высоты div .slide
в определенных точках останова. Проверьте эту скрипку --- jsfiddle.net/26fjemko/3
Лол... Я думал, что пропалs a property that I
. Большое спасибо, если вы можете опубликовать ответ, я дам вам этот зеленый чек, если вам нужно. Будьте здоровы!
Звучит как сделка. Дай мне минуту.
Чтобы решить эту проблему, для адаптивного дизайна используйте медиа-запросы. Ссылающаяся страница использует медиа-запросы в определенных контрольных точках ширины, чтобы уменьшить высоту div, содержащего изображения, чтобы позволить экрану уменьшаться по ширине, при этом отображая изображение с неповрежденным соотношением сторон (поскольку это довольно широкие изображения) . Пример в коде будет выглядеть так:
//HTML
<div id = "showcase">
<div id = "arrow-left" class = "arrow"></div>
<div id = "slider">
<div class = "slide slide1"></div>
<div class = "slide slide2 "></div>
<div class = "slide slide3"></div>
</div>
<div id = "arrow-right" class = "arrow"></div>
</div>
//CSS
#showcase,#slider{
height:100vh;
width:100%;
}
.slide{
width:100vw;
height:100vh
}
.slide1{
background:url(http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar3-1920.jpg) no-repeat center center/cover;
}
@media screen and (max-width: 900px) {
.slide{
height: 80vh;
}
}
@media screen and (max-width: 700px) {
.slide{
height: 70vh;
}
}
@media screen and (max-width: 600px) {
.slide{
height: 60vh;
}
}
@media screen and (max-width: 500px) {
.slide{
height: 50vh;
}
}
@media screen and (max-width: 400px) {
.slide{
height: 40vh;
}
}
@media screen and (max-width: 300px) {
.slide{
height: 30vh;
}
}
Имейте в виду, что это не впечатляющие примеры медиа-запросов, они просто используются для демонстрации механизма.
Добавьте приведенные ниже коды в класс «слайд»:
background-size: contain !important;
Это работает, спасибо, очень простое решение.
Эта техника хороша для тех, кто хочет, чтобы изображение было в центре.
Вы пытались установить
100vw
и100vh
для ширины и высоты соответственно?