2016-12-23 3 views
-3

Все изображения на моем веб-сайте масштабируются, и я не могу понять, где он находится в коде. Второй слайд на моей странице index такой же, как этот:все снимки масштабируются

Index page picture, но мои ноги отрезаны и т. Д. Это вообще на моей странице, где рисунки делают это. Кто-нибудь знает, где это может быть через окно проверки? Я не совсем уверен, что javascript контролирует часть этого?

Другим примером является page, в котором есть min-height: 350px; на баннере. Исходное изображение выглядит, как это и должно соответствовать, что размер баннера:

Second Example

Это CSS для баннера на странице индекса:

slider-banner-container, 
.slider-revolution-5-container { 
    width: 100%; 
    position: relative; 
    padding: 0; 
} 

.slider-banner-fullscreen, 
.slider-banner-fullwidth { 
    width: 100%; 
    position: relative; 
} 

.slider-banner-container ul.slides, 
.slider-revolution-5-container ul.slides { 
    display: none; 
} 

/*Spinner*/ 
.tp-loader.spinner2 { 
    background-color: #999; 
} 

/*Captions*/ 
.tp-caption { 
    z-index: 5; 
} 

.tp-caption a, 
.tp-caption a:hover { 
    color: #ffffff; 
} 

.tp-caption a.btn-gray, 
.tp-caption a.btn-gray:hover { 
    color: #333333; 
} 

.caption-box { 
    max-width: 540px; 
    color: #ffffff; 
    white-space: normal; 
    padding: 20px; 
    border: none; 
} 

.caption-box h2 { 
    color: #ffffff; 
} 

/*text rotator*/ 
.tp-caption .text-rotator { 
    min-width: 580px; 
    display: inline-block; 
} 

.light-translucent-bg.caption-box h2, 
.light-translucent-bg.caption-box p { 
    color: #333333; 
    font-weight: 400; 
} 

.caption-box:after { 
    z-index: -1; 
} 

.slideshow .dark-translucent-bg:not(.caption-box), 
.slideshow .light-translucent-bg:not(.caption-box) { 
    border-top: none; 
    border-bottom: none; 
    position: absolute; 
    left: 0; 
    top: 0 !important; 
    width: 100%; 
    height: 100%; 
} 

Счастливого Рождества всем.

+0

Ширина изображения - это то, что вам нужно учитывать. Если экран очень широкий, изображение будет растягиваться для его размещения, но если высота будет фиксированной, изображение начнет обрезаться. Возможно, вы могли бы выбрать изображения с важными частями в центральном положении, которые все равно будут выглядеть нормально, когда происходит обрезка? – sol

ответ

1

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

.banner.parallax, .banner.light-translucent-bg, .banner.dark-translucent-bg, .banner.default-translucent-bg { 
    min-height: 350px; 
    padding-top: 60px; 
    padding-bottom: 20px; 
} 
+0

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

0

Попробуйте это:

.imageClass { object-fit: cover; }

Это должно сделать изображение вписывается в баннере.

+2

Можете ли вы объяснить, почему это сработает? Это не имеет никакого значения на моем экране. – sol

0

Использовать свойство CSS «background-size: содержать;» если вы хотите полностью отобразить изображение в своей обертке для слайдов

.img-class{ 
    background-image: url(/images/banner1-desktop.jpg); 
    background-size: contain; 
} 
Смежные вопросы