色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

CSS flex-在保持縱橫比的同時在圖像上擴展

CSS
榮姿康2年前7瀏覽0評論

我想讓4個按鈕和一個圖像(直播流)同時出現在屏幕上，沒有溢出，在移動或pc上。我還希望圖像盡可能的大，不要把按鈕推出它們的容器，在我的例子中是主體中的容器。目前我有這個代碼，但圖像沒有保持它的長寬比。很明顯，我也不希望它在邊緣或任何類似的地方被剪掉。

html, body, .container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.container {
    background-color: purple;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    justify-content: space-around;
}

button {
    width: 10em;
    height: 10em;
    background-color: red;
    border-width: 7px;
    border-color: black;
    border-radius: 10%;
}


.arrow {
    border: solid black;
    border-width: 0 .5em .5em 0;
    display: inline-block;
    padding: .8em;
}

.up {
    transform: rotate(-135deg) translateY(-.4em) translateX(-.4em);
    -webkit-transform: rotate(-135deg) translateY(-.4em) translateX(-.4em);
}

.down {
    transform: rotate(45deg) translateY(-.4em) translateX(-.4em);
    -webkit-transform: rotate(45deg) translateY(-.4em) translateX(-.4em);
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Microscope Controller</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
        <script src="static/script.js"></script>
    </head>
    <body>
        <div class="container">
            <span>
                <img src="https://picsum.photos/200" id="live-image" />
            </span>
            <button id="move-up"><d class="arrow up"></d></button>

            <button id="move-down"><d class="arrow down"></d></button>

            <button id="set-start"></button>

            <button id="set-end"></button>
        </div>
    </body>
</html>

我不確定這是不是你想要的，但是我會根據我對這個問題的理解來回答。將img分開保存，而不是包裝在span標簽中，應該有助于保持其縱橫比。此外，不要給按鈕一個固定的高度和寬度，你應該嘗試給他們彈性:1；并將寬度設置為高寬比為1的最大寬度；，這將確保它們保持它們的尺寸。此外，如上所述，您可以刪除flex-wrap:wrap；以防止按鈕換行。已經編輯了你的代碼，希望對你有所幫助。

html, body, .container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.container {
    background-color: purple;
    display: flex;
    align-items: center;
    justify-content: space-between;
    justify-content: space-around;
}

button {
    flex: 1;
    aspect-ratio: 1;
    max-width: 10em;
    background-color: red;
    border-width: 7px;
    border-color: black;
    border-radius: 10%;
}


.arrow {
    border: solid black;
    border-width: 0 .5em .5em 0;
    display: inline-block;
    padding: .8em;
}

.up {
    transform: rotate(-135deg) translateY(-.4em) translateX(-.4em);
    -webkit-transform: rotate(-135deg) translateY(-.4em) translateX(-.4em);
}

.down {
    transform: rotate(45deg) translateY(-.4em) translateX(-.4em);
    -webkit-transform: rotate(45deg) translateY(-.4em) translateX(-.4em);
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Microscope Controller</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
        <script src="static/script.js"></script>
    </head>
    <body>
        <div class="container">
            <img src="https://picsum.photos/200" id="live-image" />

            <button id="move-up"><d class="arrow up"></d></button>

            <button id="move-down"><d class="arrow down"></d></button>

            <button id="set-start"></button>

            <button id="set-end"></button>
        </div>
    </body>
</html>

從問題中很難看出你想要什么。你至少應該附上截圖。我舉了一個例子，當圖片占據了整個空間，并且按鈕彼此靠近時。(例如，稍微縮小了按鈕的尺寸)。

html, body, .container {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  background-color: purple;
  display: flex;
  align-items: center;
}

.container>span {
  flex: auto;
}

.container>span>img {
  display: block;
  width: 100%;
}

button {
  width: 54px;
  height: 54px;
  background-color: red;
  border: solid 7px;
  border-radius: 10%;
  flex: none;
}

.arrow {
  border: solid black;
  border-width: 0 .5em .5em 0;
  display: block;
  padding: .8em;
}

.up {
  transform: rotate(-135deg) translateY(-.4em) translateX(-.4em);
}

.down {
  transform: rotate(45deg) translateY(-.4em) translateX(-.4em);
}

<div class="container">
  <span>
    <img src="https://picsum.photos/1200/600" id="live-image" />
  </span>
  <button id="move-up"><d class="arrow up"></d></button>
  <button id="move-down"><d class="arrow down"></d></button>
  <button id="set-start"></button>
  <button id="set-end"></button>
</div>