Question 186363 in CSS Question posted in
Some basic documentation can be found here.

Image escapes div with height and css grid

In the following example why does the rectangle not stay in the div?

body
{
  background-color:blue;
}
#div53
{
  width: 1000px;
  height: 340px;
  border: 1px solid #ccc;
  background-image: linear-gradient(to top left, grey, white);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

#img60
{
  max-width: 100%;
  max-height:100%;
}
<div id="div53">
    <img id="img60" alt="Thumbnail" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iODAwIiBoZWlnaHQ9IjQwMCI+CjxyZWN0IHdpZHRoPSI3OTAiIGhlaWdodD0iMzkwIiB4PSI1IiB5PSI1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjUiIGZpbGw9InJlZCIvPgo8L3N2Zz4=">
</div>

I can see that removing the grid makes it work but this is a reduced example.
The width works as expected.

Update: This seems to work in firefox but not in google-chrome.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The following solves my problem, but doesn't answer my question.

    body
{
  background-color:blue;
}
#div53
{
  width: 1000px;
  height: 340px;
  border: 1px solid #ccc;
  background-image: linear-gradient(to top left, grey, white);
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: minmax(0,1fr);
}

#img60
{
  max-width: 100%;
  max-height:100%;
}
    <div id="div53">
    <img id="img60" alt="Thumbnail" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iODAwIiBoZWlnaHQ9IjQwMCI+CjxyZWN0IHdpZHRoPSI3OTAiIGhlaWdodD0iMzkwIiB4PSI1IiB5PSI1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjUiIGZpbGw9InJlZCIvPgo8L3N2Zz4=">
</div>


  2. 0

    The div element is forced to have height of 340px and image is set to 100% of height(which is 400 px), this makes the image to overflow the div.

    Options are

    • remove the heigh of the div

    • set height of image to be same as div

    body
{
  background-color:blue;
}
#div53
{
  width: 1000px;
  height: 340px;
  border: 1px solid #ccc;
  background-image: linear-gradient(to top left, grey, white);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

#img60
{
  max-width: 100%;
  max-height:100%;
  height: 340px;
}
    <div id="div53">
    <img id="img60" alt="Thumbnail" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iODAwIiBoZWlnaHQ9IjQwMCI+CjxyZWN0IHdpZHRoPSI3OTAiIGhlaWdodD0iMzkwIiB4PSI1IiB5PSI1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjUiIGZpbGw9InJlZCIvPgo8L3N2Zz4=">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search