How can I convert a background image source into a fluid list item with a display property of inline-block?

I have a unique image with dimensions width: 656px and height: 60px that serves as the background for my menu. Each menu button has a specific position within the image, for example, the menu button for 'media' is located at (188x, 0y), with a width of 104 and a height of 30:

https://i.stack.imgur.com/Df6uz.png

Each li element has its own distinct id.

If you prefer percentages, the position would be (28.659%x, 0%y) with a width of 15.854% and a height of 50% relative to the entire image.

The actual height of the menu could be 1em or 2em depending on various factors.

My goal in CSS is to:

  • Maintain the height of each li element
  • Preserve the aspect ratio (e.g., 3.466:1 for 'media')
  • Set each <li>'s width to be 3.466 times its height
  • Fill it with background from the source image, adjusting the stretching or shrinking of the background accordingly

In pseudo code, this seems straightforward:

li.w = li.h * 3.466;
StretchBlt(src, 188, 0, 104, 30, li, 0, 0, li.w, li.h);

But how can I achieve this using CSS?

cssfluid-images

Answer №1

If you're looking to incorporate some basic math into your CSS, the calc() function can come in handy. This is especially useful when dealing with a fixed height specified in pixels and needing to perform simple calculations. For more information on browser support for this feature, refer to this link.

Regarding your inquiry about filling an element with background from a source and adjusting it accordingly by stretching or shrinking, I'm not entirely clear on what you mean.

Feel free to check out this Fiddle for a working example of how calc() can be implemented in CSS:

div {
    background: red;
    height: 60px;
    width: calc(60px * 3.466);
}
<div>div</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

Tips for manipulating fixed elements while navigating through the window's content

I am currently working with Materialize CSS (link) and I'm trying to figure out how to move select content while scrolling the page or when the window is scrolling. However, the example code I've implemented doesn't seem to be working. Is th ...

javascriptjqueryhtmlcssmaterialize

Elevate a div over another div

I have a situation where I need to nest two divs inside another div with the ID "video-wrapper". Here is the HTML code: <div class="row"> <div class="video-wrapper col-lg-2"> <div class="video-thumbnail"> <img ...

jqueryhtmlcss

Tracking the progress of reading position using Jquery within an article

Here is an example of a reading progress indicator where the width increases as you scroll down the page: http://jsfiddle.net/SnJXQ/61/ We want the progress bar width to start increasing when the article content div reaches the end of the article c ...

javascriptjqueryhtmlcssscroll

Utilize images inputted via an HTML DOM file uploader within p5.js

I'm facing a challenge with allowing users to upload their image file through a DOM file uploader (<input type="file"></input>). Once the image is uploaded, I'm unsure of how to transfer it to JavaScript and process it using p5.js. Ho ...

javascripthtmlcssp5.js

Steps to dynamically reveal a table row within another row when clicked:

I have a table and I want to show the contents of another row inside the current row when the plus icon is clicked. I'm not sure which HTML element to use for this. Please help me figure it out. Thank you in advance. <div class="pro ...

javascripthtmlcssexpandcollapsable

adjust the dimensions of the clickable icon's background

Is there a way to expand the pressable area of a close icon without altering its size? For example, if the icon is 19X19 pixels, can the pressable area be increased to 39X39 pixels? The concern lies with the div element containing the close button and the ...

htmlcss

Transitioning images smoothly and responsively with jQuery, creating a beautiful

Hey there! I'm looking for some help with transforming this jQuery effect. Instead of having fixed sized images, I want to set the size in percentage (width:100%; height:auto) so they can be responsive. Any creative ideas or suggestions? <scri ...

javascriptjqueryhtmlcsscross-fade

Issue with aligning content vertically in a Bootstrap 3 div

My attempt at vertically aligning text within a div using the following code snippet did not yield the desired result (see fiddle): <div class="container-fluid"> <div class="row"> <div class="col-xs-2"> This conte ...

csshtmltwitter-bootstraptwitter-bootstrap-3

Setting the height and width of a table and utilizing rowspans may not produce the desired outcome

I've encountered an issue with my table that I can't seem to resolve. The CSS should dictate the width and height, but something seems off. Am I approaching this incorrectly or is there something missing? Also, why are the borders not aligning p ...

htmlcsshtml-table

What could be the reason why the border of my table displays in Firefox and Chrome, but remains hidden in Internet Explorer

I am facing an issue with getting a border to display on a table in Internet Explorer versions IE6, IE7, and IE8. The border is showing up fine in Chrome and Firefox but not in the mentioned IE versions. Below is the CSS code that I have been using: #info ...

htmlcssinternet-explorerfirefox

Create dynamic cells for CSS grid using JavaScript

I have been manually generating grid cells in a specific pattern by copying and adjusting <div> elements. Although this method works, I am interested in creating an algorithm that can automatically generate the desired layout. The left box in the exa ...

javascripthtmlcssalgorithm

Include new material in the upper-right corner of each row

Struggling with various styling techniques like pull-right, float, and row-fluid, I have come here to seek help: My goal is simple - I want a Map to be displayed on the right side of a set of rows. Currently, it looks like this: Although close to what I ...

htmlcsstwitter-bootstrap-3

Unable to hear sound on Mozilla Firefox

I am facing an issue with playing an audio file using the audio tag inside the body element. The audio plays perfectly in Chrome once the body has finished loading, but it fails to play in Mozilla Firefox. I even attempted to download the audio file and pl ...

javascripthtmlcss

Tips on positioning a div based on the screen dimensions

In my table, there is an icon that reveals a chart as a popup when hovered over. This div is where the chart is displayed: <div id="chart-outer" style="@style" class="popup-chart close"> <h2 id="charttitle&q ...

javascripthtmljquerycssscreen-orientation

Aligning labels vertically with inputs

How can I align all my input fields (image) to the same vertical line? I tried using the vertical-align css property and a sass mixin I found (see below), but neither seemed to work. @mixin vertical-align($pos) { position: $pos; top: 50%; -we ...

cssvertical-alignment

The process of making a pop-up modal instead of just relying on alerts

Attempting to change from using an alert to a pop-up with a simple if statement, but encountering some issues. Here is the current code: if(values == ''){ $('body').css('cursor','auto'); alert("Blah Blah..." ...

javascriptjqueryhtmlcss

Allow the div to break out of the overflow: hidden property without disrupting the overall page layout

Currently, I am attempting to separate a child element from its parent that has overflow: hidden applied. The main reason for restricting the dimensions of the parent is for a JavaScript workaround. I have experimented with positioning the child element, ...

htmlcss

How can I remove the arrow from a CSS selector?

I'm looking to enhance the appearance of a select element on my webpage, so I've crafted some custom CSS: .selectWebDropDown { background-color:Transparent; background: url(../Images/ddl_Normal.png) no-repeat right #FFFFFF !important; ...

htmlcss

When combining <a> with the class line-through, the line does not appear

I am currently utilizing a class to replace the deprecated strike in HTML: .entfall { text-decoration: line-through; } However, when using Firefox 38.x and the following code: <span class="entfall"><a href="some link">text</a></span ...

htmlcss

Troubleshooting a Border Problem in CSS

Just joined this site and I'm new to coding, eager to learn more. I'm trying to make the border of this grey box grey, with the rest being blue. I've searched online but can't find exactly what I need. The grey area is 200px wide and ...

cssborder