How to set a background image to fit 100% of the div in a flex container with flex-direction: column and set the height dynamically? - Html

Stackerito
March 13, 2023
79 views
1 vote
2 Answers

I have a flex-container where some of the items are divs that have images as background:

.column_flex_container {
  display: flex;
  flex-direction: column;
}

.flex_image {
  width: 100%;
  background-image: url("my_img.png");
  background-repeat: no-repeat;
}

<div class="column_flex_container">
  <div class="flex_item flex_image">

  </div>
</div>

Since the height is not set, it will be 0. But how can I make it set the height according to the width and resolution?

So that the image will fit the 100% width of the flex container and change the height dynamically without losing its aspect-ratio.

Is it possible?

Tags: css html

Answers

- PandaDEV
- March 13, 2023 at 9:28 pm
- 0 votes
0
maybe try this height: max-content;

Login or Signup to reply.

- Waradu
- March 13, 2023 at 9:35 pm
- 0 votes
0
try this:
```
.column_flex_container {
  display: flex;
  flex-direction: column;
}

.flex_image {
  width: 100%;
  background-image: url("my_img.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 56.25%;
}
```
if the aspect ratio of the image is 16:9, set the padding-bottom of the flex item to 56.25% (9 divided by 16 times 100)
Login or Signup to reply.