无法弄清楚如何为网站正确覆盖带有图像的 div

Question

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.

Answer 1

 /* 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>

Answer 2

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

<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