Bollate

HTML

[ANSWERED] HTML CSS Image is bigger than parent div

By

Nov 18, 2022 ,

Solution 1 :

Replace:

grid-template-columns: auto auto auto auto;

with:

grid-template-columns: 1fr 1fr 1fr 1fr;

or if you prefer:

grid-template-columns: repeat(4, 1fr);

auto means every column has the freedom to do what it wants, and they can be different if their content is different.

Setting all columns to 1fr means that they will all be always equal and 1/4 of the total available space.

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    padding: 30px;
}

.page-container {
    width: 90%;
    margin: auto auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 40px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.match {
    background-color: blue;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 280px;
    background-color: white;
    border-radius: 32px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.country {
    top: 25px;
    right: 25px;
    position: absolute;

}

.country img {
    border-radius: 20px;
    height: 40px;
    width: 40px;
}


.title {
    font-size: 35px;
    margin-bottom: 10px;
    font-family: 'Roboto', sans-serif;
    color: red;
}

.image-container {
    position: relative;
    width: 100%;
    display: block;
}

.coverimage {
    border-radius: 30px;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    filter: brightness(80%);
}

.user-info {
    position: absolute;
    bottom: 0;
    left: 0;
    vertical-align: bottom;
    padding-left: 15px;
    padding-bottom: 10px;
}

.user-info .user-name {
    font-size: 20px;
    font-weight: bold;
    color: white;
    padding-bottom: 5px;
    font-weight: bold;
}

.user-info .user-details {
    font-size: 18px;
    color: white;
}


.link {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    margin: auto auto;
}

.link a {
    color: red;
    text-decoration: none;
    padding: 5px;
}

.link a:link {
    color: red;
}

/* visited link */
.link a:visited {
    color: red;
}

/* mouse over link */
.link a:hover {
    color: #B81A04;
}

/* selected link */
.link a:active {
    color: #B81A04
}



.previous {
    text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
    text-align: center;
    background-color: #f1f1f1;
    color: black;
}

.next {
    text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--corendon-red);
    color: white;
}

.space {
  margin-left: 2.5em;
  padding: 0 7em 5em 0;
  border-width: 2px;
}
<!-- CONTENT -->
<div class="Container">
        <h1>My Matches</h1>

        <div class="page-container" id="myMatches">
    
      <div class="match">
        <div class="image-container">
          <img src="https://cdn.prijsvrij.nl/images/Landingpages/GeotextImages/nl/Plein%20Polen.jpg" class="coverimage">
          <div class="country">
            <img src="https://upload.wikimedia.org/wikipedia/commons/1/12/Flag_of_Poland.svg">
          </div>
          <div class="user-info">
            <div class="user-name">
              Alexander Vreeswijk
            </div>
            <div class="user-details">
              20 Jaar, Man<br>€1000 - €2000
            </div>
          </div>
        </div>
        <div class="link">
          <a href="mijn_matches_profiel.html?52">Bekijk</a>
          <img src="img/page/aanbevolen_matches/pijl.png">
        </div>
      </div>
      
      <div class="match">
        <div class="image-container">
          <img src="https://cdn.prijsvrij.nl/images/Landingpages/GeotextImages/nl/Plein%20Polen.jpg" class="coverimage">
          <div class="country">
            <img src="https://upload.wikimedia.org/wikipedia/commons/1/12/Flag_of_Poland.svg">
          </div>
          <div class="user-info">
            <div class="user-name">
              Alexander Vreeswijk
            </div>
            <div class="user-details">
              20 Jaar, Man<br>€1000 - €2000
            </div>
          </div>
        </div>
        <div class="link">
          <a href="mijn_matches_profiel.html?52">Bekijk</a>
          <img src="img/page/aanbevolen_matches/pijl.png">
        </div>
      </div>
      

      
  
    
    </div>

    <div class="space"></div>

        <a href="#" class="previous" onclick="backPage()"> Previous</a>
        <a href="#" class="next" onclick="nextPage()">Next</a>
    
    <div class="space"></div>
</div>

Solution 2 :

i hope this matches with your goal,

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  padding: 30px;
}

.page-container {
  width: 90%;
  margin: auto auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  column-gap: 40px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.match {
  position:relative;
  background-color: blue;
  max-width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: max-content;
  background-color: white;
  border-radius: 32px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.country {
  top: 25px;
  right: 25px;
  position: absolute;
}

.country img {
  border-radius: 20px;
  height: 40px;
  width: 40px;
}

.title {
  font-size: 35px;
  margin-bottom: 10px;
  font-family: 'Roboto', sans-serif;
  color: red;
}

.image-container {
  position: relative;
  max-width: 100%;
  margin:auto;
  display: flex;
}

.coverimage {
  position:relative;
  border-radius: 30px;
  top: 0;
  left: 0;
  padding:2px;
  max-width: 100%;
  filter: brightness(80%);
}

.user-info {
  position: absolute;
  bottom: 0;
  left: 0;
  vertical-align: bottom;
  padding-left: 1rem;
  padding-bottom: 10px;
}

.user-info .user-name {
    position:relative;
  font-size: 20px;
  font-weight: bold;
  color: white;
  padding-bottom: 5px;
  font-weight: bold;
  
}

.user-info .user-details {
  font-size: 18px;
  color: white;
}

.link {
    position:absolute;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  margin: auto auto;
}

.link a {
  text-align:center;
  color: red;
  text-decoration: none;
  padding: 5px;
}

.link a:link {
  color: red;
}


/* visited link */

.link a:visited {
  color: red;
}


/* mouse over link */

.link a:hover {
  color: #B81A04;
}


/* selected link */

.link a:active {
  color: #B81A04
}

.previous {
position: relative;
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
  text-align: center;
  background-color: #f1f1f1;
  color: black;
}

.next {
  position:relative;
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--corendon-red);
  color: gray;
}

.space {
  margin-left: 2.5em;
  padding: 0 7em 5em 0;
  border-width: 2px;
}
<!-- CONTENT -->
<div class="Container">
  <h1>My Matches</h1>

  <div class="page-container" id="myMatches">

    <div class="match">
      <div class="image-container">
        <img src="https://cdn.prijsvrij.nl/images/Landingpages/GeotextImages/nl/Plein%20Polen.jpg" class="coverimage">
        <div class="country">
          <img src="https://upload.wikimedia.org/wikipedia/commons/1/12/Flag_of_Poland.svg">
        </div>
        <div class="user-info">
          <div class="user-name">
            Alexander Vreeswijk
          </div>
          <div class="user-details">
            20 Jaar, Man<br>€1000 - €2000
          </div>
        </div>
      </div>
      <div class="link">
        <a href="mijn_matches_profiel.html?52">Bekijk</a>
        <img src="img/page/aanbevolen_matches/pijl.png">
      </div>
    </div>

    <div class="match">
      <div class="image-container">
        <img src="https://cdn.prijsvrij.nl/images/Landingpages/GeotextImages/nl/Plein%20Polen.jpg" class="coverimage">
        <div class="country">
          <img src="https://upload.wikimedia.org/wikipedia/commons/1/12/Flag_of_Poland.svg">
        </div>
        <div class="user-info">
          <div class="user-name">
            Alexander Vreeswijk
          </div>
          <div class="user-details">
            20 Jaar, Man<br>€1000 - €2000
          </div>
        </div>
      </div>
      <div class="link">
        <a href="mijn_matches_profiel.html?52">Bekijk</a>
        <img src="img/page/aanbevolen_matches/pijl.png">
      </div>
    </div>

  </div>

  <div class="space"></div>

  <a href="#" class="previous" onclick="backPage()"> Previous</a>
  <a href="#" class="next" onclick="nextPage()">Next</a>

  <div class="space"></div>
</div>

Problem :

I have a problem. I created a page with a CSS grid where I show matches from my database. Everything works fine if I use all the columns (4 columns), but when I only have 3 matches the image of match jumps in size to fill in the rest. Here is the code:

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    padding: 30px;
}

.page-container {
    width: 90%;
    margin: auto auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
    column-gap: 40px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.match {
    background-color: blue;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 280px;
    background-color: white;
    border-radius: 32px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.country {
    top: 25px;
    right: 25px;
    position: absolute;

}

.country img {
    border-radius: 20px;
    height: 40px;
    width: 40px;
}


.title {
    font-size: 35px;
    margin-bottom: 10px;
    font-family: 'Roboto', sans-serif;
    color: red;
}

.image-container {
    position: relative;
    width: 100%;
    display: block;
}

.coverimage {
    border-radius: 30px;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    filter: brightness(80%);
}

.user-info {
    position: absolute;
    bottom: 0;
    left: 0;
    vertical-align: bottom;
    padding-left: 15px;
    padding-bottom: 10px;
}

.user-info .user-name {
    font-size: 20px;
    font-weight: bold;
    color: white;
    padding-bottom: 5px;
    font-weight: bold;
}

.user-info .user-details {
    font-size: 18px;
    color: white;
}


.link {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    margin: auto auto;
}

.link a {
    color: red;
    text-decoration: none;
    padding: 5px;
}

.link a:link {
    color: red;
}

/* visited link */
.link a:visited {
    color: red;
}

/* mouse over link */
.link a:hover {
    color: #B81A04;
}

/* selected link */
.link a:active {
    color: #B81A04
}



.previous {
    text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
    text-align: center;
    background-color: #f1f1f1;
    color: black;
}

.next {
    text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--corendon-red);
    color: white;
}

.space {
  margin-left: 2.5em;
  padding: 0 7em 5em 0;
  border-width: 2px;
}
<!-- CONTENT -->
<div class="Container">
        <h1>My Matches</h1>

        <div class="page-container" id="myMatches">
    
      <div class="match">
        <div class="image-container">
          <img src="https://cdn.prijsvrij.nl/images/Landingpages/GeotextImages/nl/Plein%20Polen.jpg" class="coverimage">
          <div class="country">
            <img src="https://upload.wikimedia.org/wikipedia/commons/1/12/Flag_of_Poland.svg">
          </div>
          <div class="user-info">
            <div class="user-name">
              Alexander Vreeswijk
            </div>
            <div class="user-details">
              20 Jaar, Man<br>€1000 - €2000
            </div>
          </div>
        </div>
        <div class="link">
          <a href="mijn_matches_profiel.html?52">Bekijk</a>
          <img src="img/page/aanbevolen_matches/pijl.png">
        </div>
      </div>
      
      <div class="match">
        <div class="image-container">
          <img src="https://cdn.prijsvrij.nl/images/Landingpages/GeotextImages/nl/Plein%20Polen.jpg" class="coverimage">
          <div class="country">
            <img src="https://upload.wikimedia.org/wikipedia/commons/1/12/Flag_of_Poland.svg">
          </div>
          <div class="user-info">
            <div class="user-name">
              Alexander Vreeswijk
            </div>
            <div class="user-details">
              20 Jaar, Man<br>€1000 - €2000
            </div>
          </div>
        </div>
        <div class="link">
          <a href="mijn_matches_profiel.html?52">Bekijk</a>
          <img src="img/page/aanbevolen_matches/pijl.png">
        </div>
      </div>
    
    </div>

    <div class="space"></div>

        <a href="#" class="previous" onclick="backPage()"> Previous</a>
        <a href="#" class="next" onclick="nextPage()">Next</a>
    
    <div class="space"></div>
</div>

As you can see, the less matches I have, the bigger a match get, but I want them to keep the size and just stay in their column. Why is this happening?

Comments

Comment posted by A. Vreeswijk

Thanks, this works for me! Just a very quick question. How can I make the imagecontainer image a square? Its now the size of the image, but I want the image to be as wide as the match div and the height equal to the width.

Comment posted by clod9353

I’m not sure I understand what you’re asking. The image provided in the snippet already looks like a square to me. Do you mean with other images with a different aspect ratio, or is that something wrong with this image?

Comment posted by John

@A.Vreeswijk remove your

By

Related Post

HTML

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022
HTML

[ANSWERED] html – How to include a clickable image behind a link

Nov 20, 2022
HTML

[ANSWERED] html – Move list item to the left in header/navigation menu

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022