Keep image dimension inside div with flexbox

Question

I have a divwith display: flex and within this div there is an image with dimension of 670x227 (natural), because she’s inside a div with flexbox she is "resized" horizontally to fill the entire space, so she "distorts" getting 732x227, tried to use flex-shrink and width to keep it at the original ratio and so far have not had success.

THE CSS:

.media-objects {
    display: flex;
    flex-direciton: column;
}

.media-objects .image {
    width: 100%;
    flex: 0 1 auto;
    flex-shrink: 0;
}

I’m using the css framework bulma

Answer 1

Actually what happens is that by default every son of a father with display:flex tends to expand to occupy the entire height of the father should the flex-direction if row, or take up the whole width if the flex-direction be it column

To solve this you have to adjust the initial "alignment" of the child that by default is stratch. In your case as the flex-direction is colum you have to configure the child not to expand horizontally, for that you determine that it should be left with align-self: flex-start, so he only occupies his own width, and not his father’s breadth.

See in the example how it looks:

.media-objects {
    display: flex;
    flex-direction: column;
    width: 598px;
    height: 160px;
    border: 1px solid black;
}

.media-objects .image {
    align-self: flex-start;
}

<div class="media-objects ">
    Nesse exemplo mudamos o valor inicial do align de stratch para flex-start
    <img class="image" src="http://unsplash.it/100/100" alt="">
</div>
<div class="media-objects ">
    O valor inicial do align e do justify é sempre stratch
    <img class="" src="http://unsplash.it/100/100" alt="">
</div>

---

OBS: If your father went with flex-direction: row (which is the value default)

.media-objects {
    display: flex;
    width: 598px;
    height: 160px;
    border: 1px solid black;
}

.media-objects .image {
    align-self: flex-start
}

<div class="media-objects ">
    valor inicial do align de stratch para flex-start
    <img class="image" src="http://unsplash.it/100/100" alt="">
</div>
<div class="media-objects ">
    com o valor default stratch
    <img class="" src="http://unsplash.it/100/100" alt="">
</div>

Answer 2

To maintain a div with a background-image responsive and in proportion, you should do the following.

Let’s say you have an image the size of 2000 x 1250, and you want to keep that ratio in any screen size or any space:

The formula you should use is (altura / largura) * 100, then we have: (1250 / 2000) * 100 = 62.5.

This value shall be defined as a percentage of padding-bottom of the div that will have the background image, but you should not spend any time, leave as 0.

Then just define the background-size as cover to keep the image the same size as the div.

See the example below working on https://jsfiddle.net/diancabral/mhfb24q2/1/

HTML:

<div class="img__box">

    <div class="img__src"></div>

</div>

CSS:

.img__box {

    float: left;

    width: 50%;

}

.img__src {

    float: left;

    /* Deve pegar a largura do elemento pai */
    width: 100%;

    /* O height é zero mesmo, a altura vai ser definida no padding-bottom */
    height: 0;

    /* Aqui você deve colocar o resultado da formula como porcentagem */
    padding-bottom: 62.5%;

    background: url(http://folhanobre.xyz/2015/09/Paisagem_imagem_linda_-52.jpg);

    background-size: cover;

}

If you want to do this with standing images, just invert the formula and calculate (largura / altura) * 100.