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.
CodePudding user response：
/* 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>