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

I'm having trouble setting the margin to 0 in Bootstrap 4. I'm only using CSS for styling and JavaScript for

Currently in the process of setting up a grid layout for a webpage under development. Encountering an issue with the .container class, that is supposed to contain all my div elements, not having any margin. Managed to remove the margin on the left side usi ...

htmlcssbootstrap-4

"Exploring the world of jQuery and the array data structure

I'm attempting to target and access all inputs with the specified class: validate['number'] However, in some cases, the classes may appear as follows: validate['required', 'number'] My goal is to identify all elements ...

jqueryhtmldocument-ready

What causes the difference in output between passing p=3+3 using GET, which results in 3 3, and using POST, which results in

It's really quite puzzling - I've noticed that sending the same parameter through various methods yields different results. ...

phphtmlformspostget

Unable to retrieve JSON using the getJson method

I've been transitioning to using jQuery exclusively, but I can't seem to get this function to work. My JSON file is pretty simple: { "status": "active" } All I'm trying to do is check if something has switched on or off. I created a basic ...

jqueryjson

display information in a structured table format

I am in need of HTML code that will render headers aligned above corresponding values when displayed. header1 header2 header3 List item 1 value111 value112 value113 value121 valueb122 valueb123 List item 2 value211 value212 value213 value221 valueb2 ...

htmlcsslayout

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/: https://i.stack.imgur.com/svzIg.png This table should have two scrollbars, one for the light blue SCROLL column and another ...

javascripthtmlcsshtml-table

Obtaining JSON data in a separate JavaScript file using PHP

I have an HTML file with the following content: // target.html <html xmlns="http://www.w3.org/1999/xhtml"> ... <script src="../../Common/js/jquery-ui-1.10.3.js"></script> <script src="../../Common/js/select.js" type="text/javascript"& ...

javascriptphphtmljson

Is it possible to resume CSS animation when the page is first loaded?

I'm looking for a way to ensure that my CSS animations on the elements in my header.php file continue smoothly when navigating to different pages. For example, if I have a 200-second looped animation and navigate to the "about us" page 80 seconds int ...

phpjqueryhtmlcss

The #skrollr-body element causes all mobile content to disappear

Currently, I am utilizing Skrollr.js for parallax effects and you can find it here: https://github.com/Prinzhorn/skrollr. At the beginning of development, I made sure to test this on mobile to ensure it functioned properly. Initially, everything was workin ...

jqueryioswordpressmobile

What steps can I take to modify the class of a button once it has been clicked using JQuery?

Currently, I am experimenting with Jquery to dynamically change the classes of bootstrap buttons when they are clicked. However, I have encountered a limitation while using toggleClass. The issue is that I am only able to toggle between two classes, whic ...

javascriptjquerycssbootstrap-4

The struggle of media queries: How can you reset an element to its original display style when it's set to none?

If faced with the following scenario, how would you handle it? Imagine this: You need to hide a visible element when a specific media query is met: .myElement { display: block; } and the media query to hide it: @media (min-width: 1000px) { .myElement ...

htmlcssmedia-queries

Harnessing the power of JSON within an HTML document to display dynamic data

Check out the JSON data through this link: The JSON file contains information about the weather. I need assistance with incorporating the data from the provided link into my HTML document as I am new to utilizing JSON for this purpose. <html> < ...

javascriptjqueryhtmljson

The success notification transforms into a cancellation alert once the file has been successfully uploaded

I'm struggling to show the correct message after a file is successfully uploaded. Currently, when a file is successfully uploaded, the success message briefly displays but then quickly changes to the cancel message. I want the success message to rema ...

phpjqueryhtml

Helping individuals identify the HTML5 Geolocation notification

Currently working on a website that requires users to accept the browser prompt for location sharing. Many users seem to overlook this prompt, which can lead to issues. The main problem we are facing is that each browser displays this prompt differently: ...

javascripthtmlgeolocation

Bootstrap 4 collapsible navbar with a stacked design

I am struggling to create a collapsible navbar. Even though everything seems to be working, the nav items are not stacking vertically as they should be. Instead, they are appearing horizontally next to each other. Here is the code snippet: <nav class= ...

htmlcsstwitter-bootstrapbootstrap-4

Create a CSS path that connects two points by drawing a line

My image is currently animating along a path, but I want to make the path itself visible. Here's the CSS code: div { width:10px; height:10px; background:red; position:relative; -webkit-animation-name:Player1; -webkit-animatio ...

htmlcss

The error message for validating my form magically disappears

I've been working on creating a registration form using HTML, Bootstrap, and JavaScript. My goal was to display an error message when a field is left empty, but for some reason, the error message appears briefly and disappears afterwards. I can't ...

javascripthtml

Is it possible to seamlessly incorporate a square image into a bootstrap background image slider without having to crop the image?

I've exhausted all the different solutions I've come across on other platforms to resolve this issue, but I'm still unable to find a fix. So here's what I'm struggling with: The problem I'm facing involves finding the correct ...

htmlcsstwitter-bootstrap

Adjust the color of static hyperlinks based on the background color

Is there a way to dynamically change the color of my fixed side links based on the background color when scrolling? I attempted to use CSS mixed-blend-mode: difference, but it does not provide the level of control I need. Therefore, I am looking to achieve ...

javascripthtmljquerycss

"Implementing form validation and AJAX submission for seamless user interaction

I am seeking a solution to validate my form using ajax and then insert it into the database also utilizing ajax. Although, with the current code, validation messages are displayed, it still performs the insertion. The issue I am encountering seems to be ...

javascriptphpjqueryajaxvalidation