Show the parent at 100% of its size with a fixed position

Can anyone provide assistance? I am attempting to set a maximum height for an image while keeping its width automatic. The issue is that these rules are not being applied because the parent element has a fixed position.

View the DEMO here

#myDiv {
    position: fixed;
    top: 100px;
    left: 50%;
    width: auto;
    height: auto;
    max-height: 100%;
    background: red;
    display: inline-block;
    padding: 10px;
    max-height: 30%;
}

#myDiv img {
    width: auto;
    height: 100%; // currently not working
}

Is there a CSS, JS, or jQuery solution to achieve this?

javascriptjquerycss

Answer №1

One issue arises from the presence of conflicting #myDiv styles where two separate max-height attributes are defined. Removing the redundant restriction set at 30% should resolve this and allow the div to function properly in a fixed manner.

Answer №2

The reason for this behavior is to maintain the aspect ratio of the image by setting the margin to auto. To specify a maximum height, you can define it in the max-height property within the #myDiv.img selector.

#myDiv {
    position: fixed;
    top: 100px;
    left: 50%;
    width: auto;
    height: auto;
    background: red;
    display: inline-block;
    padding: 10px;
}

#myDiv.img
{
     width: auto;
     max-height:90%;
}

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

Looking for assistance with JQuery and JavaScript?

I oversee a team of employees, each with a 7-day work schedule. To streamline the process, I have developed a PHP form that I would like to use to collect data for verification in JavaScript before submitting it to an SQL database using AJAX. My main cha ...

phpjavascriptjquery

Is your Node.js HTTP Request failing to function properly?

I am currently working on creating an HTTP Request function where all requests are directed to the same domain but with different file names. Unfortunately, I am encountering a problem where nothing is being displayed in the console and no data is being r ...

javascriptnode.js

Can I install more than one instance of Framework7 on the same device?

Currently, I am working on a project using cordova 6.2.0 and framework7 1.6.5. However, now I need to initiate a new project that will be based on cordova 7.1.0 and framework7 2.0.7. I am aware that there is version-manager-cordova-software [1] available ...

javascriptlinuxcordovanpmhtml-framework-7

When configuring a domain for Express sessions, it prevents the cookie from being stored

I have encountered an issue with my node.js service application and react frontend. I am utilizing Discord OAuth and express sessions for authentication on my application frontend. Everything functions perfectly when running locally, but upon deploying to ...

javascriptnode.jsexpressexpress-session

Guide on getting a website name from a URL using Javascript

Is there a simple method to extract the site name from a URL string? For example: http://www.mysite.com/mypath/mypage -> www.mysite.com http://mysite.com/mypath/mypage -> mysite.com The JavaScript code runs on the mongodb CLI side, not within ...

javascriptnode.jsmongodbserverside-javascript

Struggling to find the right look for identical items

I'm currently working on a project where I need to identify and hide duplicate values in a table. The goal is to only display unique values in the first column and hide any duplicates from view. However, I'm running into an issue when trying to h ...

javascripthtmlcss

How come lazy loading isn't functioning in my React project?

Check out my project: link. This project includes routers and lazy-loaded components for each page. Here's a brief example of a router component: export const RoutersComponent = () => { return ( <HashRouter basename={'/'}> ...

javascriptreactjsreact-router-domlazy-loadingcode-splitting

Errors are not displayed or validated when a FormControl is disabled in Angular 4

My FormControl is connected to an input element. <input matInput [formControl]="nameControl"> This setup looks like the following during initialization: this.nameControl = new FormControl({value: initValue, disabled: true}, [Validators.required, U ...

javascriptangulartypescriptangular4-forms

Unable to merge geojson and json data in Leaflet map display

To send information to the map, utilize this code: function join(){ $.when( $.getJSON('bairro.json'), $.getJSON('convertJson.php') ).done(function(responseGeojson, responseData) { var data = ...

javascriptjsondictionaryjoinleaflet

Struggling with implementing jQuery AJAX in Node.js Express - any tips?

Struggling with implementing ajax in node js for the first time. I've been testing it using the console, but unable to get a response. Here's my code: <script> function getMessage() { var data = $("#messageselect").val() $.ajax({ ...

javascriptjqueryajaxnode.jsexpress

Overlap in Bootstrap 4 Sections

I'm facing an issue with two sections on my website. They are properly separated until a certain size, https://i.sstatic.net/e52t2.png, but when the size is reduced, they start to overlap https://i.sstatic.net/aMtHr.png. Below is a snippet of my code: ...

htmlcssbootstrap-4

Use desktop images to set the background for mobile views in a React JSX environment

My custom Gutenberg block is built using React JSX, allowing users to input two hero images - one for Desktop and one for Mobile. Currently, if a user does not upload a mobile image, it displays a blank space. I am looking for a way to have the desktop ima ...

cssreactjsjsxwordpress-gutenberggutenberg-blocks

Why is my Angular 2 service not showing up in my application?

Trying to access a JSON file using an Angular service has been unsuccessful. While I can easily read and bind the JSON data without the service, attempting to do so with the service results in an error message: Failed to load resource: the server responde ...

javascriptangularjsjsonangular

Tips for resizing a Textbox by dragging in asp.net?

Is there a way to dynamically adjust the size of a Textbox by dragging it in an ASP.NET application during run-time? ...

c#javascriptasp.net

Organizing Vue.js components into separate files for a cleaner view model architecture

Having smooth functionality in a single file, I encountered difficulties when attempting to break up the code into multiple files and bundle it in a .vue file. Below is the final .vue file for simplicity. Here is the HTML file: <!DOCTYPE html> < ...

javascriptvue.js

"Upload a video file and use JavaScript to extract and save the first frame as an image

I have a webpage where users can upload a video file, and the page will generate a thumbnail based on a timestamp provided by the user. Currently, I am focusing on generating the thumbnail from the FIRST frame of the video. Here is an example of my progr ...

javascripthtmltypescript

Unable to retrieve JSON data in servlet

I am having trouble passing variables through JSON from JSP to a servlet using an ajax call. Despite my efforts, I am receiving null values on the servlet side. Can someone please assist me in identifying where I may have gone wrong or what I might have ov ...

javascriptjavajqueryjsonservlets

Displaying data-table with only the values that are considered true

Right now, I am utilizing the AgReact table to exhibit data fetched from my endpoints. The data-table is functioning properly, however, it seems to be unable to display false values received from the endpoints on the table. Below are the snippets of my cod ...

javascriptreactjstypescriptag-gridag-grid-react

I need help with importing CSS in Vue.js

When working with the Vue package, I have a need to import a CSS file directly into the index.html file. Currently, the 'index.html' file mounts #app > 'App.vue', which then mounts Todo.vue using the router. Any assistance on how t ...

cssvue.jsimportrouter

Troubleshooting: Issue with changing the CSS of a div from display:none to display:block using jQuery

I have a scenario where the content of a div is dynamically changed based on checkbox values. For most options, the div displays simple text, but for one specific option, it should display another div (referred to as childDiv). To achieve this functionali ...

jquerycss