Flip-Cards with Local Images

Mar 27, 2023
Reaction score
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">
<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">
<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 class="flip-card-back">
<h1 class="ha1"></h1>
<p class="p1"></p>
<!-- .flip-card --></div>
<!-- #card-holder --></div>

Thx Ed.


  • Gallery.png
    724.9 KB · Views: 23
Mar 31, 2023
Reaction score
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:

  1. 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.
  2. 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.
  3. 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:
.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.

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Latest member

Latest Threads