Even if the height is 600px and the side is full of browser screen, the ratio of the images will not go wrong.

I would like to make the image full of the browser and set the height to 600px.
Now, the ratio of images is strange because of the height adjustment.
Please let me know if you know how to keep the ratio of images and keep the height at 600px and change the width.
Also, you don't have to worry about 600px.
The reason why I set the height to 600px is that when I put the browser on a large screen on a 13-inch pc, the slide show selection button appears with the image without closing it.
If you have a slide show selection button below without closing when you open your browser, and there is a way to fill the image and display the image correctly at a height of about 600px, you don't have to stick to 600px.
Thank you for your cooperation.

@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;
  }
  /* US>bTechxT 100100=y*/
  25% {
    opacity:1;
    background: #161717;
  }
  /* 100 Tech=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:slide14s infinite;
  /* (a+b) Child = x*/
  opacity: 0;
}

@keyframes slide {
  0% {
    opacity: 0;
  }
  3.5% {
    opacity:1;
    z-index:1;
  }
  /* US>bTechxT 100100=y*/
  25% {
    opacity:1;
  }
  /* 100 Tech=z*/
  28.5% {
    opacity: 0;
    z-index:0;
  }
  /* y+z*/
}

input: checked through .in img,
input:checked~.span::before{
  animation:none;
}

.in —hover img,
.in:hoverspan:before{
  animation-play-state:paused;
  /* 槭 え ○ 峨 → ● ○ * 九 ｢ / 荳 € 豁 譎 ょ 繧 繧 繝 定 ｹ 繧 ｼ * /     ● ｢   
}

<!doctype html>
<html lang="ja">

<metacharset="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>

css

2022-09-30 21:50

1 Answers

I think there are some misunderstandings and misconceptions about what I'm trying to do.

13" PC

"Inch" is the physical size of the display, so this alone does not determine the screen size (resolution).
(Same number of inches can have multiple resolutions)

Fill the image horizontally

You should also keep in mind that the resolution varies depending on the PC you are using.

If you want to maintain the image ratio at a "horizontal full" and "height about 600 (about)" based on your PC environment, you should resize or trim the original image in advance to fit within that range.

2022-09-30 21:50

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656