2017-10-03 10 views
0

こんにちは私は、ブラウザのサイズ変更時にレスポンシブビューを変更せずに画像を上に移動したいのですが、カルーセルのマージンに問題があるかどうかわかりません。列または両方が、私はこのコードレスポンシブビューを変更せずに画像を上に移動

#img1{ 

    padding-top: 10px; 
    width: 65%; 
    margin: auto; 
    display: block; 
    padding-bottom: 50px; 
    background-size: auto 0; 


} 

で画像を移動するが、応答ビューは、これは私のCSSコードやHTMLコードで、変更されます。

@media (orientation: landscape) { 
    .carousel-item.active, 
    .carousel-item-next, 
    .carousel-item-prev { 
     display: block; 
     width:100%; 
     height:96vh; 
    } 
} 


.carousel .carousel-inner img { 
    width: 100%; 
    height: 30em; 
    object-fit: cover; 
    overflow: hidden; 
} 


.carousel-item.active img { 
    width:300%; 
} 


.carousel-control-next-icon{ 
    background-image:url('imagenes2/arrow next.png'); 
} 

.carousel-control-prev-icon{ 
    background-image:url('imagenes2/previous arrow.png'); 
} 


.d-block.img-fluid { 
    max-height: 100%; 

} 



.fila2 .carousel-inner img { 
    max-width: 100%; 
    border-bottom: 2px solid rgb(0,171,235); 
    border-left: 2px solid rgba(178,205,73,1.00); 
    border-right: 2px solid rgba(178,205,73,1.00); 


} 

.carousel-control-prev{ 
    max-width: 100%; 
    max-height: 75.5%; 
    border-left: 2px solid rgba(178,205,73,1.00); 
} 

.carousel-control-next{ 
     max-width: 100%; 
    max-height: 75.5%; 

    border-right: 2px solid rgba(178,205,73,1.00); 
} 

が、これはこれは私のサイトのscreenshotあるカルーセル

<div class="row fila2"> 
<!----inicio columna 2----->    <div class="col-12 imagenesc"> 

<!----inicio carousel----->  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 

<div class="carousel-inner" role="listbox"> 
<div class="carousel-item active"> 
<img class="d-block img-fluid" src="imagenes/20130819180556.jpg" alt="First slide"> 
</div> 
<div class="carousel-item"> 
<img class="d-block img-fluid" src="imagenes/20130819180644.jpg" alt="Second slide"> 
</div> 
</div> 
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> 

<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Nextborder</span> </a><!----fin carousel----->  </div> 

</div> 
</div> 

<div class="row"> 
<div class="col-md-4"> 
<div id="img1"> 
<img src="imagenes2/prueba.png" class="img-fluid"> 
</div> 
</div> 
</div> 



</div> 

の私のhtmlコードで、私はreponsiveビュー

thi is the responsive view

を変更することなく、先頭に画像を移動したいです

答えて

1

htmlファイルの完全なソースコードを提供することができますので、読者は適切なライブラリとファイルで問題を確認できますか?

問題の画像が上にならないようにする別の位置情報があるようです。

関連する問題