0

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

@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;
  /* 繝槭え繧ケ繧定シ峨○繧九→荳€譎ょ●豁「 */
}
<!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>

7
  • 「画像の比率を保ったまま高さを600pxにして横幅はリサイズされても画像の比率がおかしくならない」というのは、どういう意味ですか? 画像の比率(アスペクト比)を変化させずに、高さを600pxにすれば、幅は特定の値になります。リサイズという有り得ません(幅を変えるなら、アスペクト比を変えるか、高さを変える)
    – Fumu 7
    2020年7月4日 15:35
  • すいません。リサイズということばが間違っていました。質問文を訂正いたします。
    – magu
    2020年7月5日 23:17
  • 比率を維持したい&縦が600pxであれば、横は自動で決まるはずです。16:9であれば1067px 3:2であれば900px 4:3であれば800pxです。
    – keitaro_so
    2020年7月6日 1:52
  • 質問に書かれている事は、原理的に無理なので諦めてください。 「アスペクト比 = 横 ÷ 高さ」という関係式は常に成り立ちます。 画像が正しく表示されるというのは、画像本来のアスペクト比が保たれているということです。それが高さ600px、幅が画面の横幅いっぱい、という条件と矛盾するのであれば、希望するような大きさの画面を持つPCに買い替える以外に方法は有りません。 特注で液晶を作ってもらって、
    – Fumu 7
    2020年7月6日 2:50
  • 質問の仕方が変でした。すみません。truck-furniture.co.jp/home/…。スニペットのままですと、画像が収まらないのでそこを収まるようにできればと考えてます。
    – magu
    2020年7月6日 9:39

1 件の回答 1

0

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

13インチのPCで

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

画像を横いっぱいに

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

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

1

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。