css 引导旋转木马适合屏幕不让它工作

第1754章这个问题我看了很多，但还是不明白。从各种答案中，我得出了以下测试用例。
它保持宽高比，但使图片全宽，即使它是在肖像。然而，肖像应该有可用的100 vh高度，然后一些空间的左边和右边。
我经常看到，这是很难做到没有背景图像。不幸的是，我不知道如何使用背景图像。如果这更容易，我会拉伸一个像素。
CSS / HTML

.full-size-carousel.carousel { height: calc(100vh - 56px);}
.full-size-carousel.carousel-inner,.full-size-carousel.carousel-item { height: 100%;}
.full-size-carousel.carousel-item img { height: 100%; object-fit: cover; object-position: center;}

<body>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
  
<div class="container-fluid">
  <div id="albumCarousel" class="carousel slide" data-bs-ride="false">  
    <div class="carousel-inner">
      <div class="carousel-item full-size-carousel active">      
        <img src="https://www.americanexpress.com/de-de/amexcited/media/webp/de-de/amexcited/media/cache/article_intro_hero/cms/2023/01/grand-canyon-titelbild.webp?352612" class="d-block w-100" > 
      </div>
      <div class="carousel-item full-size-carousel">
        <img src="https://www.dds-online.de/wp-content/uploads/4/9/498673.jpg" class="d-block w-100">  
      </div>                
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#albumCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#albumCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
  </div>
  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

这个例子在Bootstrap 5沙箱中不起作用（相反，它像上面说的那样起作用），我的真实的代码在我的机器上也不起作用。

为了防止其他人对此感到绝望，我最终使用了js/jQuery。
我只是根据图像的长宽比和可用的屏幕/窗口大小修改以下图像标签：
<img src="myImg.jpg" class="carouselImage d-block w-100" >

// Get width/height on page load and add listener
setSize();
window.addEventListener("resize", onResizeInstant);

function onResizeInstant() {
    setSize();
}

function setSize() {
    const heightHeader = 20;        
    const carouselImages = $('.carouselImage');
    var addClass;
    var removeClass;
    
    carouselImages.each(
        function(){     
            const imgHeightInit = $(this).height();
            const imgWidthInit  = $(this).width();
            const imgAspectRatio = imgWidthInit/imgHeightInit;
            
            const windowHeight = window.innerHeight - heightHeader;
            const windowWidth  = window.innerWidth;
            const windowAspectRatio = windowWidth/windowHeight;
            
            if(windowAspectRatio > imgAspectRatio) {
                addClass = 'h-100';
                removeClass = 'w-100';
                imgHeight = windowHeight;
                imgWidth = imgAspectRatio * imgHeight;
            } else {
                addClass = 'w-100';
                removeClass = 'h-100';
                imgWidth = windowWidth;
                imgHeight = imgWidth / imgAspectRatio;
            }
            $(this).addClass(addClass).removeClass(removeClass);
    })
}

css 引导旋转木马适合屏幕不让它工作

1条答案

相关问题

热门标签

最新问答