スライドショー画像をスライドショーの高さ/幅に制限していますか？

私は、スライドショーを開くときにクリックすると、スライドショーの上から途中まで整列した前と次のボタンを持つモーダル画像を持っています。画像がスライドショーコンテナより長い場合、スライドショーコンテナに収まるように画像が小さくなるのではなく、スライドショーが長くなります（ただし、中央に置かれます）。スライドショー画像をスライドショーの高さ/幅に制限していますか？

コンテナは常に同じサイズになるようにしてください。画像が短ければ、今のように上に移動するよりも中央に配置したいと思います。（基本的に、私は次のボタンと前のボタンを常に同じ位置に、そしてイメージの途中にしたい）。私はしばらくこのことに固執しており、私はいくつかのものを試しましたが、どれもうまくいかないようです。

注：1200x800の画像は、私のようなもののようなものの私の標準であり、最初の写真は短すぎる、最後の例は長すぎるという例です。

<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:100%"> 
     </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:100%"> 
     </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:100%"> 
     </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:100%"> 
     </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) 
    } 
}

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; 
}

EDIT：

ここ

は[JSFIDDLE] [1]

HTMLです

[私はそれが見えるようにしたいどのような]：！https://imgur.com/a/jtmmM は、実際の画像が一部にある網掛け、私が描いたボックスは、（OFCは、ページ上で実際に表示されていない）コンテナ

出典

2017-10-30 BrownBoii333

た場合であります次のCSSを追加すると、問題を修正するはずです。私は自分が物事をどのように拡大するかを正確に理解しているかどうかはわかりません。

あなたのコメントの後、私はあなたが私は200pxのにそれを設定し、この場合には、あなたのコンテナの高さを定義する必要がありますが、あなたはあなたのための最高の作品何でも選ぶことができますobject-fit

使用して、あなたを助けるかもしれないこのpostを発見しました。

.mySlides { 
    text-align: center; 
    height: 200px; 
} 
.mySlides img { 
    width: 100%; 
    max-height:100%; 
    object-fit: contain; 
}

jsfiddle

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; 
 
}

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 { 
 
    text-align: center; 
 
    height: 200px; 
 
} 
 
.mySlides img { 
 
    width: 100%; 
 
    max-height:100%; 
 
    object-fit: contain; 
 
}

<h2 style="text-align:center">Modal Albums</h2> 
 
<span ></span> 
 
<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" > 
 
    </div> 
 

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

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

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

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

 
    </div> 
 
</div>

出典

2017-10-30 22:20:53 happymacarts

スライドショーが常にページの中央に留まり、などの画像が広すぎる場合には、それが収縮し、theresのように、私はそれをしたいです今は上下の部屋。それが長すぎる場合は、それは縮小し、今は側面の部屋です。私がvhとvwを使ってスライドショーを同じサイズのままにしておけば、あなたが提案したこの解決策は、ウィンドウサイズ – BrownBoii333

を試してみましょうか？何が起こるのですか？ – happymacarts

いいえ、私は元のアスペクト比を維持するために画像を縮小したいと思います。 – BrownBoii333

スライドショー画像をスライドショーの高さ/幅に制限していますか？

答えて

関連する問題