横長の画像をスライドショーにも合わせるには？

私はクリックしたときにスライドショーを開くモーダル画像を持っていますが、最初はスライドショーを同じサイズに保てませんでした。その後、画像のアスペクト比を維持できませんでした。私はあまりにも長いが、あまりにも幅が広いため、その作品を作った。画像はdivの高さを変更しませんが、画像が長くなるとスライドショーの側面から伸びます。私はそれに収まるように（比率を維持しながら）縮小したい。 This is kind of what it should be、部分的に網掛けされた部分が画像です。私はそれが明確になることを願っています、私は明確にしようとすると、フィドルの水平サイズを変更すると助けになるかもしれません。編集：コメント者の助言を受けて改善しましたが、スライドショーを横方向に縮小すると、画像の一部が縮小されるのではなく（800X1200画像のように）、何らかの理由で最初の画像も消去されますウィンドウを垂直に変更すると、画像も歪んでしまいます。横長の画像をスライドショーにも合わせるには？

これを行う方法がわからない場合は、ブートストラップのデフォルトのカルーセルを使用していて、私のようにポップアップすると思っていましたが、ブートストラップの作品はサイズの異なる画像でうまくいくと思います。。

JSFIDDLE HTML：

<body> 

    <h2 style="text-align:center">Modal Albums</h2> 

    <div class="row"> 
    <div class="column"> 
     <img src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> 
    </div> 
    </div> 

    <div id="myModal" class="modal"> 
    <span class="close cursor" onclick="closeModal()">&times;</span> 
    <div class="modal-content"> 

     <div class="mySlides"> 
     <div class="numbertext">1/4</div> 
     <img src="http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg" style="width:auto%"> 
     </div> 

     <div class="mySlides"> 
     <div class="numbertext">2/4</div> 
     <img src="http://www.catholicevangelism.org/wp-content/uploads/2013/06/1200x800.gif" style="width:auto"> 
     </div> 

     <div class="mySlides"> 
     <div class="numbertext">3/4</div> 
     <img src="http://www.a1carpet-to.com/wp-content/uploads/2015/08/600x400.png" style="width:auto"> 
     </div> 

     <div class="mySlides"> 
     <div class="numbertext">4/4</div> 
     <img src="https://support.kickofflabs.com/wp-content/uploads/2016/06/800x1200.png" style="width:auto"> 
     </div> 

     <a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
     <a class="next" onclick="plusSlides(1)">&#10095;</a> 

    </div> 
    </div>

CSS：

body { 
    font-family: Verdana, sans-serif; 
    margin: 0; 
} 

* { 
    box-sizing: border-box; 
} 

.row > .column { 
    padding: 0 8px; 
} 

.row:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.column { 
    float: left; 
    width: 25%; 
} 
/* The Modal (background) */ 

.modal { 
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 100px; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background: rgba(0, 0, 0, 0.9); 
} 
/* Modal Content */ 

.modal-content { 
    position: relative; 
    background-color: rgba(0, 0, 0, 0.9); 
    margin: auto; 
    padding: 0; 
    width: 90%; 
    max-width: 1200px; 
} 
/* The Close Button */ 

.close { 
    color: white; 
    position: absolute; 
    top: 10px; 
    right: 25px; 
    font-size: 35px; 
    font-weight: bold; 
} 

.close:hover, 
.close:focus { 
    color: #999; 
    text-decoration: none; 
    cursor: pointer; 
} 

.mySlides { 
    display: none; 
} 

.cursor { 
    cursor: pointer 
} 
/* Next & previous buttons */ 

.prev, 
.next { 
    cursor: pointer; 
    position: absolute; 
    top: 50%; 
    width: auto; 
    padding: 16px; 
    margin-top: -50px; 
    color: white; 
    font-weight: bold; 
    font-size: 20px; 
    transition: 0.6s ease; 
    border-radius: 0 3px 3px 0; 
    user-select: none; 
    -webkit-user-select: none; 
} 
/* Position the "next button" to the right */ 

.next { 
    right: 0; 
    border-radius: 3px 0 0 3px; 
} 
/* On hover, add a black background color with a little bit see-through */ 

.prev:hover, 
.next:hover { 
    background-color: rgba(0, 0, 0, 0.8); 
    text-decoration: none; 
} 
/* Number text (1/3 etc) */ 

.numbertext { 
    color: #f2f2f2; 
    font-size: 12px; 
    padding: 8px 12px; 
    position: absolute; 
    top: 0; 
} 

img { 
    margin-bottom: -4px; 
} 

t img.hover-shadow { 
    transition: all .2s ease-in-out; 
} 

.hover-shadow:hover { 
    transform: scale(1.1); 
} 

.modal-content { 
    -webkit-animation-name: zoom; 
    -webkit-animation-duration: 0.6s; 
    animation-name: zoom; 
    animation-duration: 0.6s; 
} 

@-webkit-keyframes zoom { 
    from { 
    -webkit-transform: scale(0) 
    } 
    to { 
    -webkit-transform: scale(1) 
    } 
} 

@keyframes zoom { 
    from { 
    transform: scale(0) 
    } 
    to { 
    transform: scale(1) 
    } 
} 


.mySlides img { 
    height:100%; 
    margin:0 auto; 
    margin-bottom:50px; 
} 

.mySlides { 
    text-align:center; 
    height:80vh; 
}

JS：

function openModal() { 
    document.getElementById('myModal').style.display = "block"; 
} 
function closeModal() { 
    document.getElementById('myModal').style.display = "none"; 
} 

var slideIndex = 1; 
showSlides(slideIndex); 

function plusSlides(n) { 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("demo"); 
    var captionText = document.getElementById("caption"); 
    if (n > slides.length) { 
    slideIndex = 1 
    } 
    if (n < 1) { 
    slideIndex = slides.length 
    } 
    for (i = 0; i < slides.length; i++) { 
    slides[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
    dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex - 1].style.display = "block"; 
    dots[slideIndex - 1].className += " active"; 
    captionText.innerHTML = dots[slideIndex - 1].alt; 
}

出典

2017-11-01 BrownBoii333

私の代わりにインラインCSSのクラスを作成することをお勧めしたいです。

問題があなたの幅によって作成されたjsfiddle

<div class="mySlides"> <div class="numbertext">1/4</div> <img src="http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg" class="img"> </div> ... </div> .img { max-width:100%; max-height:100%; width: auto; height: auto; object-fit: scale-down; }

を確認してください：自動プロパティ。代わりに、の最大幅：100％を使用してください。それはあなたのモーダルの全幅になります。 object-fit：scale-downを追加して、画像全体がそのサイズと比率から独立して表示されるようにします。お役に立てれば。

出典

2017-11-01 14:47:13

これを改善しましたが、スライドショーを横方向に縮小すると、（800X1200画像のように）縮小するのではなく、スムージングされます。何らかの理由で、ウィンドウを垂直方向に変更すると、それはまた画像を歪ませる。 – BrownBoii333

右のようにしてください：.img { max-width：100％; 最大高さ：100％; 幅：自動; 身長：自動; }。私はこれがそれを解決すると思う。 –

https://jsfiddle.net/nhk3o0m1/20/ウインドウの高さを上下に変更すると、（アスペクト比を維持しながら）画像がどのように変化して、スライドショー内に留まるかがわかります。ウィンドウの幅が変わったときにもこれが起こるようにしたい。この最後の編集を含めて、それはそうしません。ウィンドウの幅が小さすぎると、右側に単に飛び出します。ご協力いただきありがとうございます。本当にありがとうございます。 – BrownBoii333

横長の画像をスライドショーにも合わせるには？

答えて

関連する問題