Html-Css image stretched

Question

I'm building a memory cards game with HTMl, CSS and JS to practice. This is what I've done so far: https://spomin.krix12.repl.co/ As you can see, the image of the question mark and the image of the flipped card is streched a little bit. This is the CSS code for it:

.memory-game {
  width: 640px;
  height: 640px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px;
}

.memory-card {
  width: calc(25% - 10px);
  height: calc(33.333% - 10px);
  margin: 1px;
  position: relative;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform .5s;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

memory-card is inside memory-game. How can I fix the streched images? Is there a problem in html(I can provide you the code if needed) or css or should I crop the images itself to some ratio? I would appreciate your help.

If you change the width and what the proportions to stay the same, you should have `height: auto;` [Here's](https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio) a good example of how you can shrink the size of an image while keeping proportions — charlie-map, Nov 27 '21 at 23:41

score 1 · Answer 1 · answered Nov 27 '21 at 23:42

You can keep the images from stretching by only specifying a specific width or height (but not both).

You might want to wrap the images in a div that sizes to the size of the parrent and centers the image within it (For instance by using a flexbox with justify-content: center; and align-items: center;)

score 1 · Accepted Answer · edited Nov 02 '22 at 12:20

1. First solution:

The first column is using div tag in change of img, which could be a non-feasible solution accesibility-wise. This is how I've done it:

<div class="back-face" style="
    height: 100%;
    background-image: url('slike/emoji-ji/zaprto.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
"></div>

2. Second solution:

Using flex! (as Hades mentioned below) Put the img inside a div, then make that div a display: flex;, and turn its content to align-items: center;. The image, in turn, needs a few properties to know how to render width and height, which you can adjust to your needs.

<div class="back-face" style="display: flex;align-items: center;">
    <img src="slike/emoji-ji/zaprto.png" alt="zaprto" style="
    width: 100%;
    height: 50%; // or auto
">
</div>

3. Third and best solution:

Let's use what we learned so far, and change a lot of code around! If you want all of them to look like the third one, here's the steps:

Change the CSS:

.memory-card {
    width: calc(25% - 10px);
    height: auto;
    margin: 1px;
    position: relative;
    transform: scale(1);
    transform-style: preserve-3d;
    transition: transform .5s;
    box-shadow: 1px 1px 1px rgb(0 0 0 / 30%);
    /* add the following lines which used to be in img */
    border-radius: 5px;
    background: #1C7CCC;
    display: flex;
    align-items: center;
}

.front-face, .back-face {
    /* a few things removed */
    width: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.front-face {
    transform: rotateY(180deg);
    /* add the following line to keep consistency */
    padding: 20px;
}

And resulting html will look like:

<div class="memory-card" data-framework="gospod" style="order: 4;">
      <img class="front-face" src="slike/emoji-ji/gospod.png" alt="vesel">
      <img class="back-face" src="slike/emoji-ji/zaprto.png" alt="zaprto">
</div>

Barely any minor changes!

Final Thoughts

Remember, using inline style within your html is an antipattern! Make sure to refactor the code provided into your own css classes.

Html-Css image stretched

2 Answers2

1. First solution:

2. Second solution:

3. Third and best solution:

Final Thoughts