<div class="container">
  <div class="box box--landscape"></div>
  <div class="box box--portrait"></div>
</div>

<div class="form">
  <div class="control">
    <label for="background-size">background-size:</label>
    <select name="background-size" id="background-size">
      <optgroup label="关键字">
        <option value="cover">cover</option>
        <option value="contain">contain</option>
      </optgroup>
      <optgroup label="一个值">
        <option value="auto">auto</option>
        <option value="100px">100px</option>
        <option value="10rem">10rem</option>
        <option value="20vw">20vw</option>
        <option value="40%">40%</option>
      </optgroup>
      <optgroup label="两个值">
        <option value="auto auto">auto auto</option>
        <option value="auto 100px">auto 100px</option>
        <option value="auto 10rem">auto 10rem</option>
        <option value="auto 20vw">auto 20vw</option>
        <option value="auto 40%">auto 40%</option>
        <option value="100px auto">100px auto</option>
        <option value="10rem auto">10rem auto</option>
        <option value="20vw auto">20vw auto</option>
        <option value="40% auto">40% auto</option>
        <option value="200px 100px">200px 100px</option>
        <option value="80% 20vw">80% 20vw</option>
        <option value="100% 100%">100% 100%</option>
        <option value="100% auto">100% auto</option>
        <option value="auto 100%">auto 100%</option>
      </optgroup>
    </select>
  </div>
  <div class="control">
    <label for="background-image">background-image:</label>
    <select name="background-image" id="background-image">
      <option value="Landscape">Landscape</option>
      <option value="Portrait">Portrait</option>
    </select>
  </div>
  <div class="control">
    <label for="background-position">background-position:</label>
    <select name="background-position" id="background-position">
      <option value="left top">left top</option>
      <option value="right top">right top</option>
      <option value="left bottom">left bottom</option>
      <option value="right bottom">right bottom</option>
      <option value="center">center</option>
    </select>
  </div>
  <div class="control">
    <label for="background-origin">background-origin:</label>
    <select name="background-origin" id="background-origin">
      <option value="padding-box">padding-box</option>
      <option value="border-box">border-box</option>
      <option value="content-box">content-box</option>
    </select>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  gap: 1rem;
}

.form {
  padding: 1rem;
  background-color: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(20px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.form label {
  white-space: nowrap;
  min-width: 160px;
  text-align: right;
}

.form select {
  padding: 0.25em 0.5em;
  font-size: inherit;
  min-width: 160px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding-top: 120px;
}

.box {
  width: min(100%, 400px);
  border: 20px solid rgb(120 200 10 / 0.5);
  padding: 20px;
}

.box--landscape {
  aspect-ratio: 4 / 3;
}
.box--portrait {
  aspect-ratio: 3 / 4;
}

:root {
  --background-size: auto;
  --background-origin: padding-box;
  --background-position: left top;
}

.box {
  background-repeat: no-repeat;
  background-color: hsl(120 60% 20% / 0.5);
  background-position: var(--background-position);
  background-origin: var(--background-origin);
  background-size: var(--background-size);
  background-image: var(--image);
}

const rootElement = document.documentElement;
const size = document.getElementById("background-size");
const image = document.getElementById("background-image");
const position = document.getElementById("background-position");
const origin = document.getElementById("background-origin");

const imgLandscapeSrc = `url(https://picsum.photos/1600/900?image=12)`;
const imgPortraitSrc = `url(https://picsum.photos/900/1600?image=211)`;

rootElement.style.setProperty("--image", imgLandscapeSrc);

[size, position, origin].forEach((select) => {
  select.addEventListener("change", (etv) => {
    rootElement.style.setProperty(`--${etv.target.id}`, etv.target.value);
  });
});

image.addEventListener("change", (etv) => {
  if (etv.target.value === "Landscape") {
    rootElement.style.setProperty("--image", imgLandscapeSrc);
  } else if (etv.target.value === "Portrait") {
    rootElement.style.setProperty("--image", imgPortraitSrc);
  }
});