我有一个带图像的旋转木马。但是图像显示得太大了。
这是我的HTML代码:
<报头GT; < div id =“carouselExampleIndicators”class =“carousel slide”data-ride =“carousel”>…
您可以将代码与此进行比较。这些图片在这里完美缩放。
更新:删除 img CSS代码中的样式标记,以避免所有单个图像的全局样式。
img
.carousel-item { background: no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; object-fit: cover !important; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <div class="carousel-caption d-none d-md-block"> <h3>Third Slide</h3> <p>This is a description for the third slide.</p> </div> <img src="https://i.stack.imgur.com/8h5Xz.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <div class="carousel-caption d-none d-md-block"> <h3>Third Slide</h3> <p>This is a description for the third slide.</p> </div> <img src="https://i.stack.imgur.com/8h5Xz.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <div class="carousel-caption d-none d-md-block"> <h3>Third Slide</h3> <p>This is a description for the third slide.</p> </div> <img src="https://i.stack.imgur.com/8h5Xz.jpg" class="d-block w-100" alt="..."> </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">Next</span> </a> </div>
这是我的全部css:这可能是一些夸大其词的东西吗?
*, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } .carousel-item { height: 65vh; min-height: 300px; background: no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; object-fit: cover !important; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; font-family: inherit; font-weight: 500; line-height: 1.2; color: inherit; } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .row img { width: 24px; height: 24px; } .navbar-brand img { width: 24px; height: 24px; } .border-top { border-top: 1px solid #dee2e6 !important; } footer { display: block; } .featurette-divider { margin: 5rem 0; /* Space out the Bootstrap <hr> more */ } .featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -0.05rem; } @media (min-width: 40em) { /* Bump up size of carousel content */ .carousel-caption p { margin-bottom: 1.25rem; font-size: 1.25rem; line-height: 1.4; } .featurette-heading { font-size: 50px; } } @media (min-width: 62em) { .featurette-heading { margin-top: 7rem; } } .marketing h2 { font-weight: 400; } .p-2 { padding: 0.5rem !important; padding-top: 0.5rem !important; padding-right: 0.5rem !important; padding-bottom: 0.5rem !important; padding-left: 0.5rem !important; } #testimonia { background: rgba(228, 136, 31, 0.8); padding: 30px 0 30px 0; text-align: center; margin-top: 40px; font-weight: 400; line-height: 1; letter-spacing: -0.05rem; } #testimonia p { font-size: 25px; } .navbar-brand { font-size: 20px; color: #000; font-weight: bold; } img { width: 500px; height: 500px; } hr { box-sizing: content-box; height: 0; overflow: visible; } footer { padding-bottom: 30px; } #btn1 { margin-bottom: 20px; } .modal-header { background: #e4881f; } .full-screen { background-size: cover; background-position: center; background-repeat: no-repeat; } a { color: #e4881f; }
我认为旋转木马显示器没有任何问题。您需要决定如何在轮播中显示图像。
有两种选择:
的 1)不要限制旋转木马的高度。 强>
如果不限制旋转木马高度,则整个图像将可见。但是在大屏幕上高度会非常大。所以,在某些时候它更好地约束旋转木马的高度。
的 2)限制旋转木马的高度。 强>
正如我在您的代码中看到的那样,您已将高度限制为 65vh 。当您约束轮播项目高度时,图像可以显示在任一个中
65vh
cover
contain
正如我在您的代码中看到的,您已经使用过 background-size: cover ,因此垂直裁剪图像以填充容器区域。
background-size: cover
为了便于理解,您可以访问stackoverflow下面的帖子,了解图像的位置 cover 要么 contain 模式: https://stackoverflow.com/a/27941378/1266447