[英]Align responsive css menu to middle without altering it in mobile resolution
[英]move image to the top without altering the responsive view
你好,我想在浏览器调整大小时将图像移到顶部而不改变响应视图,我不知道轮播或列或两者的边距是否存在问题,我使用此代码移动图像
#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);
}
这是我的轮播的html代码
<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文件的完整源代码,以便读者使用正确的库和文件来查看您的问题吗?
定位信息似乎还有另一个来源,可防止所关注的图像到达顶部。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.