Keep image dimension inside div with flexbox

Question

Keep image dimension inside div with flexbox

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

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

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

css

asked by anonymous 24.01.2017 / 13:41

2 answers

Driver does not wait for the page to load to proceed Problem with PDO extension Postgres

score 0 · Answer 1

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

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

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

This value should be set to% in the padding-bottom of the div that will have the background image, but you should not pass any height, leave as 0 .

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

See the example below for link

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 reverse the formula and calculate (largura / altura) * 100 .

score 0 · Answer 2

Actually what happens is that default every child of a parent with display:flex tends to expand to occupy the entire parent height if flex-direction is row , or occupy the full width if flex-direction is column

To solve this you have to adjust the initial "alignment" of the child, which by default is stratch . In your case, as flex-direction is colum , you have to set the child to not expand horizontally, so you determine that it should be left with align-self: flex-start , so it only occupies the width itself, not the width of the parent.

See the example as follows:

.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 parent was 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>