0

現在取り組んでいるホームページにスライダーがあります。画面の幅全体を占める完全なビューポートの高さを達成しようとしています。

現在これを達成できる唯一の方法は、画像を引き伸ばすか、画像を中央に配置しないことです。

画像は、水平方向と垂直方向のほぼ中央に配置する必要があります。これにより、顧客はブラウザのどの幅でも画像の中心を見ることができ、画像が不均衡に引き伸ばされることはありません。

background-size: cover; を試しました。背景画像ではないため、要素で成功しませんでした。コンテナーには現在 100vh がありますが、幅が問題です。

この問題はhttp://joeybox.info/にあります。画像の上のメニューとロゴで、100ビューポートの高さが「折り目」の下にあることに気づきましたが、cssを理解したら、最終的に画像の上にロゴとメニューを配置しています。

スタック オーバーフロー フォーラム内で見つかった多くの解決策を試しましたが、私のシナリオではうまくいきません。

間違ったコードを削除した後の私の現在の CSS は次のとおりです。

.bx-wrapper img {display: inherit;
    height: 100vh;
    max-width: inherit;}

.ewic-wid-imgs {height: 100vh;
    max-width: unset;
    width: unset;}

.bx-wrapper img {display: inherit;
    height: 100vh;
    max-width: inherit;}

html=

<div class="slider-box">
    <div id="ewic-con-385">
    <div style="display: none;" id="preloader-385" class="sliderpreloader">
    </div>
    <div style="max-width: 100%; margin: 0px auto;" class="bx-wrapper">
    <div style="width: 100%; overflow: hidden; position: relative; height: 633px;" class="bx-viewport">
    <ul style="width: 315%; position: relative; left: 0px;" class="bxslider-385">
    <li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
    <img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
    <div class="ewic-caption"><span>Qw Direct Leather Keyrings</span></div>
    </li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider">
    <img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
    <div class="ewic-caption"><span>Qw Direct Leather Keyrings</span>
    </div></li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
    <img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg"><div class="ewic-caption">
    <span>Qw Direct Leather Keyrings</span>
    </div></li></ul></div>
    <div class="bx-controls bx-has-controls-direction bx-has-controls-auto">
    <div class="bx-controls-direction"><a class="bx-prev disabled" href="">Prev</a>
    <a class="bx-next disabled" href="">Next</a></div><div class="bx-controls-auto"><div class="bx-controls-auto-item"><a class="bx-start active" href="">Start</a></div>
    <div class="bx-controls-auto-item"><a class="bx-stop" href="">Stop</a></div></div></div></div><br>
</div>
</div>
4

2 に答える 2

0

これを実現するには、.bx-wraper 内のイメージに追加できます。

.bx-wrapper img {
  display: inherit;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  max-width: inherit;
}

li親を相対に設定する必要があります。

.bx-wrapper ul li {
  position:relative;
  width:100%;
  height:100%;
  list-style: none !important;
  margin: 0 !important;
}

親ulを変更します：

.bx-wrapper ul{
    width:100%;
}
于 2015-07-14T11:25:07.013 に答える