How to automatically adjust the height of an image to a grid area?
up vote
0
down vote
favorite
I'm quite new with grids, I'm a bit lost. I tried everything but I'm unable to make the height of the grid row to fit automatically to my image (embeded with css).
Here is my code :
HTML-------------------------------------------------------------------
<div class="wrapper-louez">
<div class="guirlande"></div>
</div>
CSS -----------------------------------------------------------------------
.wrapper-louez{
display: grid;
grid-template-columns: 1fr 50% 1fr;
grid-auto-rows: minmax(400px, auto);
}
.guirlande{
background: url(../img/louez-la-kantine-guirlande.png) no-repeat top center;
background-size: 100% auto;
grid-area: 1 / 1 / 1 / span 3;
}
I need the row to fit automatically to my image but the image doesn't show if I dont set a fixed row height in the wrapper. How can I make the height's row flexible ?
Thanks for your help.
Lucie
html css css3 grid css-grid
edited Nov 9 at 22:13
Michael_B
141k44225335
asked Nov 9 at 11:08
Lucie Arlette
1
add a comment |
up vote
0
down vote
favorite
I'm quite new with grids, I'm a bit lost. I tried everything but I'm unable to make the height of the grid row to fit automatically to my image (embeded with css).
Here is my code :
HTML-------------------------------------------------------------------
<div class="wrapper-louez">
<div class="guirlande"></div>
</div>
CSS -----------------------------------------------------------------------
.wrapper-louez{
display: grid;
grid-template-columns: 1fr 50% 1fr;
grid-auto-rows: minmax(400px, auto);
}
.guirlande{
background: url(../img/louez-la-kantine-guirlande.png) no-repeat top center;
background-size: 100% auto;
grid-area: 1 / 1 / 1 / span 3;
}
I need the row to fit automatically to my image but the image doesn't show if I dont set a fixed row height in the wrapper. How can I make the height's row flexible ?
Thanks for your help.
Lucie
html css css3 grid css-grid
edited Nov 9 at 22:13
Michael_B
141k44225335
asked Nov 9 at 11:08
Lucie Arlette
1
Would be helpful if you can post enough code to reproduce the problem.
– Michael_B
Nov 9 at 19:50
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm quite new with grids, I'm a bit lost. I tried everything but I'm unable to make the height of the grid row to fit automatically to my image (embeded with css).
Here is my code :
HTML-------------------------------------------------------------------
<div class="wrapper-louez">
<div class="guirlande"></div>
</div>
CSS -----------------------------------------------------------------------
.wrapper-louez{
display: grid;
grid-template-columns: 1fr 50% 1fr;
grid-auto-rows: minmax(400px, auto);
}
.guirlande{
background: url(../img/louez-la-kantine-guirlande.png) no-repeat top center;
background-size: 100% auto;
grid-area: 1 / 1 / 1 / span 3;
}
I need the row to fit automatically to my image but the image doesn't show if I dont set a fixed row height in the wrapper. How can I make the height's row flexible ?
Thanks for your help.
Lucie
html css css3 grid css-grid
edited Nov 9 at 22:13
Michael_B
141k44225335
asked Nov 9 at 11:08
Lucie Arlette
1
I'm quite new with grids, I'm a bit lost. I tried everything but I'm unable to make the height of the grid row to fit automatically to my image (embeded with css).
Here is my code :
HTML-------------------------------------------------------------------
<div class="wrapper-louez">
<div class="guirlande"></div>
</div>
CSS -----------------------------------------------------------------------
.wrapper-louez{
display: grid;
grid-template-columns: 1fr 50% 1fr;
grid-auto-rows: minmax(400px, auto);
}
.guirlande{
background: url(../img/louez-la-kantine-guirlande.png) no-repeat top center;
background-size: 100% auto;
grid-area: 1 / 1 / 1 / span 3;
}
I need the row to fit automatically to my image but the image doesn't show if I dont set a fixed row height in the wrapper. How can I make the height's row flexible ?
Thanks for your help.
Lucie
html css css3 grid css-grid
html css css3 grid css-grid
edited Nov 9 at 22:13
Michael_B
141k44225335
asked Nov 9 at 11:08
Lucie Arlette
1
edited Nov 9 at 22:13
Michael_B
141k44225335
asked Nov 9 at 11:08
Lucie Arlette
1
edited Nov 9 at 22:13
Michael_B
141k44225335
edited Nov 9 at 22:13
Michael_B
141k44225335
edited Nov 9 at 22:13
Michael_B
141k44225335
141k44225335
asked Nov 9 at 11:08
Lucie Arlette
1
asked Nov 9 at 11:08
Lucie Arlette
1
asked Nov 9 at 11:08
Lucie Arlette
1
1
Would be helpful if you can post enough code to reproduce the problem.
– Michael_B
Nov 9 at 19:50
add a comment |
Would be helpful if you can post enough code to reproduce the problem.
– Michael_B
Nov 9 at 19:50
Would be helpful if you can post enough code to reproduce the problem.
– Michael_B
Nov 9 at 19:50
Would be helpful if you can post enough code to reproduce the problem.
– Michael_B
Nov 9 at 19:50
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53224579%2fhow-to-automatically-adjust-the-height-of-an-image-to-a-grid-area%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Would be helpful if you can post enough code to reproduce the problem.
– Michael_B
Nov 9 at 19:50