What is the best method for assigning real-life units, such as centimeters or millimeters, to a dimension

Is there a way to set the height of an img in millimeters, regardless of the device being used?

Currently, setting the CSS rule height: 10mm; actually translates to height: 37.8px, as explained in this link: http://css-tricks.com/the-lengths-of-css/

If pure CSS cannot achieve this, I am open to jQuery or any other solution. Please provide some guidance.

Thank you for any assistance!

If my question is unclear, what I have attempted includes using responsive CSS and media queries, which did not yield the desired outcome. You can view the page where I tested this here:

I also tried emulating mobile devices with this tool:

Despite being labeled as responsive design, it seems more like anti-responsive design :)

jqueryhtmlcssresponsive-designmedia-queries

Answer №1

After finding the solution to this question: How to convert pixels to millimeters?

You can easily calculate either mm to px or vice versa by determining the size of a div with millimeter dimensions.

<div id="mm" style="height:1mm;display:none"></div>

Then, use the following code:

var pxPerMM = $('#mm').height();

I hope this information proves helpful.

Edit:

If you are wondering how to assign a measurement in millimeters using jQuery, you can accomplish this with the css() function. For instance: https://jsfiddle.net/yusrilmaulidanraji/Lyzr2ju1/

$("#millimeter-size").css("height","50mm");
$("#millimeter-size").css("width","50mm");

#millimeter-size{
  border: 1px solid black;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="millimeter-size">

</div>

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

Stop the css animation from playing

I created a slideshow using HTML and CSS, and I'm looking to implement a feature where the slideshow pauses when my mouse hovers over it. I attempted to achieve this by using -webkit-animation-play-state: paused;, but unfortunately, it only pauses one ...

htmlcssanimationslideshow

Ajax updates previous text to new text upon successfully completing the task

I have a question regarding changing text using AJAX after success. I have written this AJAX code which is functioning properly. However, I aim to replace the old text with new text in the .chnged div. For instance: <input type="text" name="text" va ...

javascriptjqueryajax

Updating a JavaScript global variable within a click event function: A quick guide

I am currently using Javascript and jQuery to retrieve the mouse coordinates of a click event for use in other Javascript functions. The issue I am facing is that global variables set within an event function do not update outside the function, unlike glob ...

javascriptglobal-variablesjquerymouseclick-event

Showing ASP code within a DIV element (inline)

Working on setting up a 'shopping cart' feature on our website, but running into some issues with the ASP code. Does anyone have any advice to offer? In the image below, you can see that when items are added to the cart, the 'total' is ...

cssasp-classic

Enhance Your Search Bar with Ajax and JQuery for Dynamic Content Updates

My goal is to create a search bar that dynamically loads content, but I want the actual loading of content to start only after the user has finished typing. I attempted a version of this, but it doesn't work because it doesn't take into account ...

javascriptjqueryajaxsearch

Is there a way to automatically increase a value by clicking on it?

Check out this code snippet I'm working with: let funds = document.createElement('funds') funds.style.color = 'green' funds.style.textAlign = 'center' funds.style.fontSize = '50px' funds.style.backgroundCol ...

javascripthtml

Prevent draggable canvas elements from overlapping using jQuery

I'm currently working on a project where I need to make three canvas elements draggable while preventing them from overlapping each other. After researching similar issues, I came across the "jquery-ui-draggable-collision" library. Here is the code I ...

javascriptjquerycanvasjquery-ui-draggable

Guide on implementing themes to HTML within the append() function

I am currently working on a project where I need to dynamically add HTML tags using JavaScript. However, I have noticed that the themes or styles are not being applied to the newly added elements within the append method. In my HTML file, I am using jQue ...

javascriptjqueryhtmlcssjquery-mobile

How do popular social media platforms such as Facebook and Twitter utilize real-time APIs to display live updates in news feeds

I'm curious about the technology being used for real-time updates, and I doubt they rely on AJax methods like setInterval() to make server requests every second. This approach could be inefficient with a large number of concurrent users. Do you think ...

javascriptjqueryajaxfacebooktwitter

Implementing automatic activation of a tab upon page load using Angular

I am currently working with a set of Bootstrap nav pills in my navigation bar. The 'ng-init' code in my Angular script sets the 'dateState' to 'past' on page load. However, I have noticed that the 'Past Events' nav p ...

javascripthtmlcssangularjs

Ways to navigate through textarea components within an iframe tag

I am presented with the following HTML structure: <iframe id="screenshare" ref="screenshare" class="fullScreen2"></iframe> To dynamically fill the <iframe> element, I am utilizing JavaScript through the below function: func ...

javascriptjqueryiframescrolltextarea

The absence of the Django CSRF token has been detected

Inside the custom.js file, there is a function defined as shown below : function contactTraxio(fullname, telephone, email) { if (typeof(fullname)==='undefined') fullname = null; if (typeof(telephone)==='undefined') telephone = ...

javascriptjquerypythonajaxdjango

Bootstrap: Troubleshooting Margin Problems

I am currently utilizing the Bootstrap sb admin template. I attempted to include 3 columns in a row, but encountered the issue of them being merged together with no space around them. I experimented by modifying the Bootstrap file through a CDN link and pr ...

htmltwitter-bootstrapcss

Using Express and Node.js to implement the Google Maps API

Currently working on creating a simple web application using the Google Maps API with express/node. At the moment, I have three main files that make up my project: server.js const express = require('express'); const bodyParser = require(' ...

javascripthtmlnode.jsgoogle-mapsexpress

The Google Language Translator disregards the formatting

Currently, I am in the midst of developing a website with Wordpress and have successfully integrated Google Language Translator. Everything seems to be working well, except for one issue - when I translate the content, it alters the font size. Prior to tra ...

htmlcsswordpress

False return - Inoperative link - Scroll option

I have a JavaScript drop-down menu that is functioning correctly, but when I click on one of the links in the dropdown, the link does not work. I suspect it has something to do with my "return false/true" setup. Here's my JavaScript code: function d ...

javascriptjqueryajax

What is the best way to ensure that form inputs and labels stay aligned?

Let's consider a scenario where there is a web page containing a form: <form> <label for="FirstName">First:</label> <input name="FirstName" type="text"> <label for="MiddleName">Middle:</label> <input n ...

htmlcss

Adjusting the text color based on the dynamically set background color

If I have a calendar where each entry has a unique background color assigned to it (one color per user), including both light and dark colors that users can choose from, how can I set the text color to match the background style? Where should I begin wit ...

phpjqueryhtmlcss

Exploring different ways to customize the grid style in Angular 6

Here is the style I am working with: .main-panel{ height: 100%; display: grid; grid-template-rows: 4rem auto; grid-template-columns: 14rem auto; grid-template-areas: 'header header''sidebar body'; } I want to know how to cha ...

cssangulargrid

Validate if the JSON data array contains any elements

I'm currently working with an ajax code and I need to determine whether the JSON data contains an array or not. However, despite my attempts, I am still receiving incorrect output. $.ajax({ url: url, type: 'POST', da ...

javascriptphpjqueryjsonajax