2016-12-23 6 views
-3

私のウェブサイト上のすべての画像が拡大表示されており、コードのどこにあるのかわかりません。 indexページの2番目のスライドは、すべての画像は拡大しています

Index page pictureですが、私の脚はカットされています。これは一般に写真が行っているすべてのページにあります。誰かがそれが検査窓を通してどこにあるのかを知っていますか?私はかなりjavascriptがこれのいくつかを制御している場合はわからない?

もう1つの例はpageで、バナーにmin-height: 350px;があります。元の画像はこのように見ていると、バナーのサイズに合わせなければならない。すべての人に

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%; 
} 

ハッピークリスマス:

Second Example

これはインデックスページ上のバナーのCSSです。バナーに絵フィットを作るべき

.imageClass { object-fit: cover; }

+0

イメージの幅は考慮する必要があります。画面が非常に広い場合、画像はそれに対応するように伸びますが、高さが固定されていれば画像は切り取られ始めます。たぶん、重要な部分が中央の位置にある画像を選択することができます。切り抜きが起きたときでもうまく見えますか? – sol

答えて

1

スライダは必要に応じて動作します。画面のサイズを変更すると、画像全体が一部のサイズで表示されます。 ovokuroのような別のイメージを入手してください。 2番目の画像では、高さを制限している最小の高さを探しています。サイズを大きくして画像を下に押してみてください。

.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

はこれを試してみてください。

+2

これがなぜ機能するのか説明できますか?私の画面には違いはありません。 – sol

0

「background-size:contains;」というCSSプロパティを使用してください。スライドのラッパーにイメージを完全に表示したい場合は

関連する問題