Html - css flex-grow on image while keeping aspect ratio

NoBlockhit
May 21, 2023
161 views
0 votes
2 Answers

I want to make 4 buttons and an image (live stream) appear on screen at the same time, without overflow and on mobile or pc. I also want the image to be as large as it can be, without pushing the buttons out of the boundries of their container, in my case the container in the body. At the moment i have this code but the image doesn’t keep its’ aspect ratio. I obviously also don’t want it to be cut off at the edges or anything alike.

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>

Tags: css html

Answers

I am unsure if this is what you’re looking for, but I will try to answer based on my understanding of the issue. Keeping the img separately instead of wrapped in a span tag should help maintain its aspect ratio. Further instead of giving the buttons a fixed height and width you should try giving them flex: 1; and set the width to max-width with an aspect-ratio: 1;, which will ensure they maintain their dimensions. Also, as mentioned above you can remove the flex-wrap: wrap; to prevent the buttons from wrapping to the next line. Have edited your code, hope it helps.

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>

It’s hard to tell what you want from the question. You should at least attach a screenshot. I gave an example when the picture occupies the entire space and the buttons are close to each other. (Slightly reduced the size of the buttons for example).

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – css flex-grow on image while keeping aspect ratio

Answers