

画像をブラウザの表示いっぱいにして、高さを600pxにしたいと考えてます。  
今は高さを調節したせいで画像の比率がおかしくなってしまいます。  
画像の比率を保ったまま高さを600pxにして横幅は変更されても画像の比率がおかしくならない方法をご存知の方いらしたら教えてください。  
また、600pxにこだわらなくても良いです。  
高さを600pxにした理由は、13インチのpcでブラウザーを大画面にした時にスクローズせずにスライドショーの選択ボタンが画像とともに一緒に出てくるサイズだったからです。  
ブラウザーを開いた時にスクローズせずに、スライドショーの選択ボタンが下に表示され、かつ画像が横いっぱいになり、高さが600px程度で画像が正しく表示できる方法があれば、600pxにこだわる必要はありません。  
よろしくお願いします。

[code]

    @charset "utf-8";
    .out {
      position: relative;
    }
    
    .in img {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: .5s;
      z-index: 0;
    }
    
    img {
      display: block;
      width: 100%;
      height: 600px;
    }
    
    input {
      display: none;
    }
    
    .in {
      display: flex;
      justify-content: center;
    }
    
    label span {
      display: block;
      width: 10px;
      height: 10px;
      padding: 9px;
      border-radius: 100%;
      cursor: pointer;
      position: relative;
      z-index: 2;
    }
    
    label span::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #9c9999;
      opacity: 0.5;
      border-radius: 100%;
    }
    
    input:nth-of-type(1):checked~.in label:nth-of-type(1) span::before,
    input:nth-of-type(2):checked~.in label:nth-of-type(2) span::before,
    input:nth-of-type(3):checked~.in label:nth-of-type(3) span::before,
    input:nth-of-type(4):checked~.in label:nth-of-type(4) span::before {
      background: #161717;
      opacity: 1;
    }
    
    label span::before {
      animation: slidebutton 14s infinite;
    }
    
    @keyframes slidebutton {
      0% {
        opacity: 0.5;
        background: #9c9999;
      }
      3.5% {
        opacity: 1;
        background: #161717;
      }
      /* bﾃｷxﾃ�100=y */
      25% {
        opacity: 1;
        background: #161717;
      }
      /* 100ﾃｷc=z */
      28.5% {
        opacity: 0.5;
        background: #9c9999;
      }
      /* y+z */
    }
    
    label:nth-of-type(2) span::before,
    label:nth-of-type(2) img {
      animation-delay: 3.5s;
    }
    
    label:nth-of-type(3) span::before,
    label:nth-of-type(3) img {
      animation-delay: 7s;
    }
    
    label:nth-of-type(4) span::before,
    label:nth-of-type(4) img {
      animation-delay: 10.5s;
    }
    
    input:nth-of-type(1):checked~.in label:nth-of-type(1) img,
    input:nth-of-type(2):checked~.in label:nth-of-type(2) img,
    input:nth-of-type(3):checked~.in label:nth-of-type(3) img,
    input:nth-of-type(4):checked~.in label:nth-of-type(4) img {
      opacity: 1;
      z-index: 1;
    }
    
    .in img {
      animation: slide 14s infinite;
      /* (a+b)ﾃ幼=x */
      opacity: 0;
    }
    
    @keyframes slide {
      0% {
        opacity: 0;
      }
      3.5% {
        opacity: 1;
        z-index: 1;
      }
      /* bﾃｷxﾃ�100=y */
      25% {
        opacity: 1;
      }
      /* 100ﾃｷc=z */
      28.5% {
        opacity: 0;
        z-index: 0;
      }
      /* y+z */
    }
    
    input:checked~.in img,
    input:checked~.in span::before {
      animation: none;
    }
    
    .in:hover img,
    .in:hover span::before {
      animation-play-state: paused;
      /* 繝槭え繧ｹ繧定ｼ峨○繧九→荳€譎ょ●豁｢ */
    }
[/code]

[code]

    <!doctype html>
    <html lang="ja">
    
    <meta charset="utf-8">
    
    <body>
    
      <div class="open-overlay">
        <span class="bar-top"></span>
        <span class="bar-middle"></span>
        <span class="bar-bottom"></span>
      </div>
      <div class="out">
        <img src="https://gigaplus.makeshop.jp/kukunochi/topPhot/saboten.JPG">
        <input type=radio name="slide" id="slide1">
        <input type=radio name="slide" id="slide2">
        <input type=radio name="slide" id="slide3">
        <input type=radio name="slide" id="slide4">
        <div class="in">
          <label for="slide1"><span></span><img src="https://gigaplus.makeshop.jp/kukunochi/topPhot/saboten.JPG"></label>
          <label for="slide2"><span></span><img src="https://gigaplus.makeshop.jp/kukunochi/topPhot/wall_plant.JPG"></label>
          <label for="slide3"><span></span><img src="https://gigaplus.makeshop.jp/kukunochi/topPhot/wall_lamp.JPG"></label>
          <label for="slide4"><span></span><img src="https://gigaplus.makeshop.jp/kukunochi/topPhot/wall_bamp.JPG"></label>
        </div>
      </div>
    
    
    </body>
    
    </html>
[/code]


CC BY-SA 4.0
2020-07-04T09:38:21.617
68271
2020-07-06T04:53:19.047
2020-07-05T23:19:12.923
40597
40597
question
css
高さを600px、横をブラウザー画面いっぱいにしても画像の比率がおかしくならないようにしたい。


やろうとしていることに対して、いくつか認識違いやズレがある気がします。

> 13インチのPCで

「インチ」はディスプレイの物理的なサイズなので、これだけでは画面のサイズ (解像度) は決まりません。  
(同じインチ数でも複数の解像度があり得る)

> 画像を横いっぱいに

こちらも、利用しているPCによって解像度は様々だということを念頭に置く必要があるでしょう。

仮であなたのPC環境を基準に置くとして、「横いっぱい」かつ「高さは600 (程度)」で画像の比率を維持したいなら、その範囲に収まるように **元画像**
のサイズを予めリサイズやトリミングしておくべきではないかと思います。


CC BY-SA 4.0
2020-07-06T04:53:19.047
68330
2020-07-06T04:53:19.047
3060
68271
answer