Flip-Cards with Local Images

jamkota3dprints · Mar 27, 2023

Hi all...

Thank you for reading this...I'm in need of some help as I'm pulling my hair out lol...I've created a html webpage page called 'Gallery' where I'd like to show off images of 3d models I've created. I've coded the flip-card part with no issues, but as soon as I put on a locally saved (in the root folder) image it goes array. The image will not fit the card. Its either too small and you can see the card front as well as the image, or its too big and actually increases the card size too? I've tried various methods of resizing the image both in the html with width="" height="" etc but it does nothing, I've used a resizing website to resize the image to lots of different px like 350 x 300 etc but again it does nothing? I've copied my codes below, I'm using external CSS.

CSS is :-

#card-holder {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.flip-card {
background-color: transparent;
width: 16.80em;
height: 16.80em;
margin: 1em;
perspective: 62.5em;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2.6s;
transform-style: preserve-3d;
box-shadow: 0 0 1em rgba( 0, 0, 0, 0.8 );
}
.flip-card:hover .flip-card-inner,
.flip-card:active .flip-card-inner {
transform: rotateY( 180deg );
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: #000;
}
.flip-card-back {
background-color: #2980b9;
color: #fff;
transform: rotateY( 180deg );
}
.flip-card img {
display: block;
width: 100%;
height: auto;
border: 1px solid #000;
}

HTML is :-

<!DOCTYPE html>
<html lang="en" class="pc js js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Gallery Page</title>
<link rel="stylesheet" href="St3le.css" media="screen" type="text/css">
</head>
<body>
<a href="Home.html" Alt="Back"><img src="Logo1.jpeg" alt="Logo" width="350" height="250" id="thelogo" class="center"/></a>
<div id="card-holder">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt=""/>
</div>
<div class="flip-card-back">
<h1 class="ha1"></h1>
<p class="p1"></p>
</div>
</div>
</div>
</div>
</body>
</html>

Thx Ed.

Phro0244 · Apr 18, 2023

It sounds like you're having trouble with getting your images to fit properly within your flip-cards. Here are a few things you could try:

Resize the images before adding them to your HTML. Instead of trying to resize the images using HTML and CSS, you could use an image editor (such as Photoshop or GIMP) to resize the images to the exact dimensions you need. This would ensure that your images fit perfectly within your flip-cards.
Use the object-fit property in CSS. The object-fit property allows you to specify how an image should be resized to fit within its container. For example, you could set object-fit: cover to ensure that the image covers the entire container while maintaining its aspect ratio.
Adjust the dimensions of your flip-cards. If you're having trouble getting your images to fit properly within your flip-cards, you could try adjusting the dimensions of the flip-cards themselves. For example, you could increase the width and height of your flip-cards to accommodate larger images.

Here's an example of how you could use the object-fit property to get your images to fit properly within your flip-cards:

CSS:

.flip-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #000;
}

This will ensure that your images cover the entire container while maintaining their aspect ratio.

Image on header	2	May 2, 2024
Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
Image not changing between "mute" & "un-mute" images.	5	Jun 2, 2023
Gallery - mosiac/grid layout with filtering and information page popup	1	Apr 13, 2020
Help with my responsive home page	2	Dec 14, 2022
Stuck with html and css	25	Dec 14, 2022
Troubles with Fullpage / please help	0	Dec 14, 2023
Help with code	0	Jun 12, 2022

Flip-Cards with Local Images

jamkota3dprints

Attachments

Phro0244

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads