一枚だけ高さの違うimageを何とかしてslideshowのレイアウトが崩れないようにする

Slideshow Gallery

1 / 6

2 / 6

3 / 6

4 / 6

5 / 6

6 / 6

❮ ❯

上のslide show 3/6 花 が1,024px × 640px 他は1,024px × 576px 一枚だけheight が高い。
style="width: 100%" を解除し、object-fit: cover; を指定すると縮小表示され枠内に収まる。しかし、拡大時やスマホ表示で大きさそのままとなってしまうから戻す。

aspect ratio を常に16:9 に保つには、まずwidthを指定 30vw とする。これにheight はcalc()を使う。16:9 なら height: calc(30vw * 0.5625), 4:3なら height: calc(30vw * 0.75)
検索してたくさん出てきた <div> に入れて padding-top: 56.25% とするやり方では正しく要素を配置しないとレイアウトが崩れてしまったため、要素・Elementを追加せずに、CSSで指定する方法にたどり着いた。

slideshow に使っているjavaScript の img tag から 文字を取得する。</div> background-image:url(); では、img tag ではないから attribute alt="花" を取得できずに caption が undefined になってしまう。

slideshow 上img tag style="width:100%;height:47vw;" 下のthumbnail には style="width: 100%; height: 5rem;" を指定。 これでslideshowのscriptを崩さずに、スライドさせても全体の表示が崩れることがなくなった。

• 基本のcodepen
• 一番参考になったところ
• 参考になったが難しかったところ
• 他、aspect ratio img 等で検索するとpadding-top:56.25%;

4:3 height:calc(30vw * 0.75);

8:5 height:calc(30vw*0.625);

7:4 height:calc(30vw*0.5714);

9:3 height:calc(30vw*0.3333);

    <div style="position: relative;">
    <div class="thumbnail" style="background-image: url(https://imgur.com/9aPFuKX.jpg)"></div>
     </div>

     <style>
     /* aspect ratio 16:9 */ 
    .thumbnail {
       background-size: cover;
       background-position: center center;
       padding-top: 56.25%;
       width: 100%;
    }
  

object-fit:cover;

object-fit: scale-down;

width="100%"

  .aspectCon {
    max-width: 200px;
   /* display: grid;
    grid-template-columns: auto;
    justify-content: center; */ 
  }
  .aspectCon > div {
    padding: 5px;
  }
  .image-wrap {
    position: relative;
    padding-bottom: 56.25%;
  }

   .asimg {
    width:28vw;
    height: calc(28vw * 0.562);
     }
  

• hero image