Expanding Images Using HTML and CSS

I am currently working on a memory card game using HTML, CSS, and JS as part of my practice. You can check out what I have accomplished so far right here: . Upon inspection, you may notice that the images of the question mark and the flipped card are slightly stretched in the game. Here is the CSS code I am using:

.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);
}

The memory-card is nested within the memory-game container. How can I go about fixing the stretched images? Is it a matter of adjusting the HTML structure, tweaking the CSS code, or should I consider cropping the images to a specific ratio? Any insight or guidance you could provide would be greatly appreciated.

javascripthtmljquerycss

Answer №1

1. The Initial Approach:

https://i.sstatic.net/3Rp0u.png

Originally, the solution involved replacing the img tag with a div, which may not be the most accessible option. Here's a snippet of the code:

<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. The Alternate Method:

https://i.sstatic.net/bSjxA.png

Another solution involves utilizing flex properties. By placing the img inside a div with display: flex; and align-items: center;, you can achieve the desired layout. Here's how:

<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. The Optimal Solution:

https://i.sstatic.net/wpFtx.png

To enhance accessibility and improve the overall code structure, consider making significant changes as demonstrated below:

Adjust the CSS as follows:

.memory-card {
    /* Updated styles */
}

.front-face, .back-face {
    /* Adjusted properties */
}

.front-face {
    /* Additional styling */
}

Here's how the resulting HTML may 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>

Minimal adjustments showcase maximum impact!

Wrapping Up

  • Remember, avoid using inline styles in your HTML for better code organization. Refactor the provided code into separate CSS classes for a more maintainable approach.

Answer №2

To avoid images from stretching, it is recommended to only set a specific width or height, but not both simultaneously.

One useful technique is to wrap the images in a div element that resizes according to its parent and aligns the image centrally within it. This can be achieved by utilizing a flexbox with justify-content: center; and align-items: center;.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to install non-root dependencies in node_modules using NPM?

The repository @superflycss/component-navbox contains the following list of dependencies: "devDependencies": { "@superflycss/component-body": "^1.0.1", "@superflycss/component-display": "^1.0.2", "@superflycss/component-header" ...

javascriptcssnode.jsnpm

Searching for the index of a nested array in jQuery using JSON

I am currently working on developing an image uploader using Codeigniter3 along with jQuery and Ajax. Problem: I am facing difficulty in understanding how to locate the index of the array received from the ajax response shown below. Here is the data retu ...

javascriptjqueryajaxjson

Deliver the Express.js: transmit outcomes post next() invocation

I have a unique app feature that allows users to create their own routes in real-time. I also want to show a custom 404 message if the route is not found, so I added this code to my last middleware: app.use((req, res, next) => { // ...normal logic ...

javascriptnode.jsexpress

Managing joopz, most likely using either jquery or php

Have you checked out this cool website: This site allows you to send and receive text messages using your browser. I'm curious if it's possible for me to automate the process of controlling and collecting data from the browser. This would enabl ...

c#javaphpjqueryjson

Retrieving and storing successful response data in Angular JS using the $http service caching

My dataFactory is set up to retrieve posts in a simple manner: dataFactory.getPosts = function () { if (this.httpPostsData == null) { this.httpPostsData = $http.get("http://localhost/matImms/wp-json/posts?type=journey&filter[posts_per_page ...

javascriptangularjsionic-framework

What are the steps to create a horizontal submenu in WordPress?

Is there a way to change the default vertical sub menu of my main menu to horizontal? The CSS for the sub menu in stylesheet.css is as follows: .main-nav>ul>li .sub-menu> li { padding:0 20px; } .main-nav>ul>li .sub-menu> li:first-ch ...

csswordpress

Is it possible to display partial html templates by accessing the local url and blending them with the main index.html file?

Is there a way to view partial HTML templates locally without copying them into the main index.html file? I'm looking for a solution that allows me to access my partial templates through a local URL without having to manually paste them into the main ...

javascripthtmlcssurl

How come the "colspan" attribute is not functioning properly in my table?

Check out the simple table form I created on jsfiddle. Here is the code snippet: <table> <tr> <td class="field_label">name</td> <td>*</td> <td> <input type="text"> ...

javascriptjqueryhtml

Utilizing JavaScript to eliminate objects from a collection and showcase a refreshed arrangement

On a simple webpage using bootstrap and js/jquery, data is fetched via ajax to create entries displayed to the viewer. The process involves: - making a request - parsing XML to create an array of objects with all the data - sorting by one property - cr ...

javascriptjqueryhtmlajaxtwitter-bootstrap

The error message encountered is "Uncaught (in promise) Error: Unable to access attributes of an undefined object (reading 'launch')."

I am currently learning electron.js by developing a basic application that extracts information from a website. However, I am encountering a frustrating and annoying error. Here is the folder structure of my project The following code snippet represents ...

javascripthtmlnode.jselectron

Include various categories into the div containers of the listed items within the query outcomes

Is there a way to customize div styles based on query results? I want to differentiate the styles of divs in the result list based on their content. For example: I'd like bird names in the result list to have different div styles compared to other a ...

javascriptphpjqueryhtmlcss

Is there a way to send multiple actions to Node.js via a dropdown list using POST method?

I have encountered an issue where I am trying to include multiple actions in a single form within a dropdown list. However, I am only able to POST one action at a time. admin.html <form action="/start" method="post" id="tableForm"> <select id= ...

htmlnode.jsexpress

How far apart are two surfaces when they are rotated along the Y-axis

Access Code: Click here to access the code I am trying to make sure that the red surface lies completely flat on top of the gray surface. However, there seems to be a gap (marked ??) between the two surfaces when I rotate 'modifier1'. How can I ...

javascripthtmlcssfamo.us

Get your hands on large files with ease by utilizing jQuery or exploring alternative methods

Within my User Interface, there exists an Advanced Search section where the user can select from 7 different options as depicted in the diagram. Based on these selections, a web service is triggered. This web service returns search results in JSON format, ...

javascriptjquery

When I try to expand the width of a div, the display property set to inline

Visit my website At the moment, my website features the following code snippet: <div class="main-sale"> <div class="time-left">Sale Ends in: </div> <div class="sale-item"> //Highlighted Sale it ...

jqueryhtmlcss

What causes the index to display [object Object] rather than an integer in React?

It has been a long time since I last worked with React, and now I'm facing an issue. Whenever I use console.log to display the index within the map function, my console output looks like this: https://i.stack.imgur.com/VbGmE.png However, the result ...

javascriptreactjstypescriptloopsnext.js

Deploying a node application and a Java JAR to Heroku

Currently in the process of developing a node.js app, with plans to host it on Heroku. The only complication is that the app depends on a jar file that needs to be executed. Can Heroku support running Java for this purpose? ...

javascriptjavanode.jsherokujar

Using CSS selectors in Framework7 Vue allows for precise targeting and styling

I am currently working on developing a Cordova/Phonegap application using vue.js and the Framework7. I have been able to utilize functions like "onClick" by using the "v-on:click="OnClick" attribute within an HTML element. It's worth noting that Frame ...

csscordovadomvue.jshtml-framework-7

In order to properly set up an AutoNumeric object, it is essential to have at least one valid parameter provided

I've been working with the AutoNumeric library in my Vue js V2 application and keep encountering a specific error message in the console Issue with mounted hook: "Error: At least one valid parameter is needed to initialize an AutoNumeric object& ...

javascriptvue.jsvuejs2

What is the best way to use ajax/jquery to load blade or php content into a view in Laravel?

Can anyone advise on how to dynamically load content in a view using ajax requests? I am familiar with loading html elements like this: ("#div_place").html(<p>...), but I'm facing an issue when trying to load php/blade objects into a div. Is the ...

javascriptphpajaxlaravel