Javascript幻燈片影像容器

所以這是我的代碼。到目前為止，我有幻燈片作業人員與所述給定影像。

我遇到的問題是包含 拉伸影像以適合我的容器 div。:)

這是代碼：

歡迎大家幫忙~！謝謝。^^

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i  ) {
    slides[i].style.display = "none";
  }
  slideIndex  ;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

.imgContainer {
    padding-top: 80px;
    background-color: rgba(0, 0, 0, 0.603);
    width: 100%;
    height: 575px;
}

.img1 {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; 
}

<div class="imgContainer" alt="imgContainer">
<img class="mySlides" src="/Users/stevenjeffers/Documents/GitHub/III/images/1.jpg" alt="imgj1">
<img class="mySlides" src="/Users/stevenjeffers/Documents/GitHub/III/images/2.jpg" alt="imgj1">
<img class="mySlides" src="/Users/stevenjeffers/Documents/GitHub/III/images/3.jpg" alt="imgj1">

</div>

uj5u.com熱心網友回復：

您需要 100% 的 imgContainer 容器使用帶有 img 的 css 規則

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i  ) {
    slides[i].style.display = "none";
  }
  slideIndex  ;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

.imgContainer {
    padding-top: 80px;
    background-color: rgba(0, 0, 0, 0.603);
    width: 100%;
    height: 575px;
}
.imgContainer img {
    width:100%
}
.img1 {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; 
}

<div class="imgContainer" alt="imgContainer">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 1&font=lobster" alt="imgj1">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 2&font=lobster" alt="imgj1">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 3&font=lobster" alt="imgj1">

</div>

uj5u.com熱心網友回復：

在 css 中，您通過alt屬性選擇元素.imgj1，您應該做的是通過它們的類訪問它們.mySlides。此外，片段需要有作業影像才能正常作業，因為很難為您提供答案。

嘗試將影像包裝在包含<div>元素中并添加width: 100%和height: 100%影像和<div>元素。如果這不起作用，那么請修復影像，以便我可以更好地回答。

所以根據我的理解，你希望影像填滿整個父容器。

試試這個：

<div class="imgContainer">
    <div class="mySlides">
        <img class="slideImage" src="{image_src}" alt="imgj1">
    </div>
    <div class="mySlides">
        <img class="slideImage" src="{image_src}" alt="imgj2">
    </div>
    <div class="mySlides">
        <img class="slideImage" src="{image_src}" alt="imgj3">
    </div>
</div>

.imgContainer {
    padding-top: 80px;
    background-color: rgba(0, 0, 0, 0.603);
    width: 100%;
    height: 575px;
}

.mySlides {
    width: 100%;
    height: 100%;
}

.slideImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

uj5u.com熱心網友回復：

.imgContainer {
    padding-top: 80px;
    background-color: rgba(0, 0, 0, 0.603);
    width: 100%;
    height: 575px;
}

vvv**************Actually Works to an extent**************vvv
.mySlides {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    
}

^^^**************Actually Works to an extent**************^^^

所以這樣做確實包含 div 中的影像。

但是，使用寬度 100% 和高度 100% 只會給我 100% 的位于 div 中的影像大小。它不會像 div 那樣將其拉伸到螢屏的 100% 寬度。

我正在尋找任何影像，并用它完全填充包含的 div。我知道這可以通過 javascript 實作。我能找到的東西并不多。

標籤：

上一篇：Ajax實時搜索-Onclick填充輸入值

下一篇：是否可以使用jquery為CSS變數設定影片？