0

Title poorly describes the issue, sorry. I have div's ("cards") in my website that contain a lot of content. One of the important thing's I wanted was to have an image covering the "cards", however every time I've attempted to fit them properly, they either don't change from their current setup or they take on massive size relative to the page size and not the "card" size. I've read other threads regarding similar issues, but I haven't gotten anything to work yet.

Image not fitting into Card correctly

/* Entire div for card base + image inside it */

.card   {
   display: flex;
   flex-flow: row no-wrap;
   justify-content: space-between;
   width: 275px;
   height: 150px;
   font-size: 25px;
   padding: 20px;
   background-color: #f1f1f1;
   border-radius: 30px;
   box-shadow: 0px 0px 18px #888888;
   transition: all 0.5s ease;
}

.card:hover   {
    background-color: #daeaf5;
}

.card-image   {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.card-img:hover   {
    -webkit-filter: grayscale(0%);
    filter: greyscale(0%);
}

.card-img   {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%;
    border-radius: 30px;
    -webkit-filter: grayscale(100%);
    filter: greyscale(100%);
    -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
      mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0));
    transition: all 0.5s ease;
}



/* ignore this stuff, it's just styling for the rest of the card */

.card-title   {
    font-size: 10px;
}

.card-content   {
    font-size: 18px;
    margin-bottom: 5px;
    white-space: nowrap;
}

.card-a   {
    color: black;
    text-decoration: none;
    border-radius: 30px;
    margin: 15px;
}

.main   {
   margin-left: 10px;
}

.flex-container   {
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
   align-items: flex-start;
   align-content: flex-start;
}
/* Entire card div, yes I know my code looks like a goblin wrote it, I am a goblin. */
/*So far, this was the only way I have found to get it to work how I wanted to*/

<div class="main">
    <ul type="none">
     <div class="flex-container">

          <a class="card-a" href="###">
        <li>
          <div class="card">
            <div class="left-side">
              <div class="card-title">Make</div>
                <div class="card-content">Template</div>
              <div class="card-title">Model</div>
                <div class="card-content">Temp</div>
              <div class="card-title">Trim</div>
                <div class="card-content">Temp</div>
              <div class="card-title">Year</div>
                <div class="card-content">Temp</div>
            </div>
            <div class="right-side">
              <img class="card-img" src="https://static.turbosquid.com/Preview/001308/648/FU/_D.jpg" alt="Temporary Picture provided by Turbosquid 1308648"/>
            </div>
          </div>
        </li>
          </a>

            
     </div>
    </ul>
</div>

Ideally I want the image to fit snugly into the card, hence the corners on the image matching the corners on the card. I've tried to relocate the image into various places, re-sorting the div's and attempting to structure everything differently. Unfortunately, every time I've tried that, I get farther and farther away from the ideal card design. Yes I know, the code looks like chicken scratch compared to anyone else's work, please excuse my poor man's amount of experience.

4
  • Do you want the whole car image to be on the right of the text or for it to be centered in the card and therefore the text to write over a bit of it?
    – A Haworth
    Sep 29, 2021 at 5:03
  • @AHaworth I want the image to fit the div behind it fully, and for the text to sit on top, writing over it if necessary.
    – volt-kent
    Sep 29, 2021 at 5:32
  • Have you investigated object-fit contain? This would ensure the image was as big as possible within the contraints of the card without distortion.
    – A Haworth
    Sep 29, 2021 at 5:35
  • I didn't try that before, however I'm not too worried about distortion, the images I will be using in the final product should fit the cards perfectly without issue.
    – volt-kent
    Sep 29, 2021 at 5:56

2 Answers 2

0

/* Entire div for card base + image inside it */

.card   {
   display: flex;
   flex-flow: row no-wrap;
   justify-content: space-between;
   width: 275px;
   height: 150px;
   font-size: 25px;
   padding: 20px;
   background-color: #f1f1f1;
   border-radius: 30px;
   box-shadow: 0px 0px 18px #888888;
   transition: all 0.5s ease;
   position: relative;
   overflow: hidden;
}

.card:hover   {
    background-color: #daeaf5;
}

.card-image   {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.card-img:hover   {
    -webkit-filter: grayscale(0%);
    filter: greyscale(0%);
}

.card-img   {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%;
    border-radius: 30px;
    -webkit-filter: grayscale(100%);
    filter: greyscale(100%);
    -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
      mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0));
    transition: all 0.5s ease;
}



/* ignore this stuff, it's just styling for the rest of the card */

.card-title   {
    font-size: 10px;
}

.card-content   {
    font-size: 18px;
    margin-bottom: 5px;
    white-space: nowrap;
}

.card-a   {
    color: black;
    text-decoration: none;
    border-radius: 30px;
    margin: 15px;
}

.main   {
   margin-left: 10px;
}

.flex-container   {
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
   align-items: flex-start;
   align-content: flex-start;
}
.right-side{
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
}
/* Entire card div, yes I know my code looks like a goblin wrote it, I am a goblin. */
/*So far, this was the only way I have found to get it to work how I wanted to*/

<div class="main">
    <ul type="none">
     <div class="flex-container">

          <a class="card-a" href="###">
        <li>
          <div class="card">
            <div class="left-side">
              <div class="card-title">Make</div>
                <div class="card-content">Template</div>
              <div class="card-title">Model</div>
                <div class="card-content">Temp</div>
              <div class="card-title">Trim</div>
                <div class="card-content">Temp</div>
              <div class="card-title">Year</div>
                <div class="card-content">Temp</div>
            </div>
            <div class="right-side">
              <img class="card-img" src="https://static.turbosquid.com/Preview/001308/648/FU/_D.jpg" alt="Temporary Picture provided by Turbosquid 1308648"/>
            </div>
          </div>
        </li>
          </a>

            
     </div>
    </ul>
</div>

7
  • Please could you explain how this works. Thanks.
    – A Haworth
    Sep 29, 2021 at 5:01
  • .card {position: relative; overflow: hidden;} and .right-side{ position: absolute; left: 0; top: 0; right: 0; bottom: 0;} Sep 29, 2021 at 5:13
  • Sorry, I meant in words.
    – A Haworth
    Sep 29, 2021 at 5:16
  • Hey, Tested @AmanSharma 's solution with other cards with different images, and it worked nearly perfectly for what I wanted! Thank you so much, I guess I was over-complicating the issue by looking at the similar threads and seeing people use JS and ect.
    – volt-kent
    Sep 29, 2021 at 5:35
  • @volt-kent don't forget to upvote! :-) Sep 29, 2021 at 9:03
0

use the CSS background-image property then play with its properties till you get what you want I.E:

<div id="card_image">
  <h1>hello World</h1>
  <p>this Section Has a background image</p>
</div>

<style>
  #card_image {
   background-image:url("https://static.turbosquid.com/Preview/001308/648/FU/_D.jpg");
background-size:25%;
backgroun-position:top right;
}
</style>
play with this 
1
  • This was actually one of the first things that I tried, and it wouldn't fit the div space/link space correctly no matter how I fiddled with it. Good suggestion nonetheless, but wouldn't work for my project.
    – volt-kent
    Sep 29, 2021 at 22:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.