What causes the unset width or height to impact object-fit, and is there a workaround for this issue?

Query Beginnings

Encountering unexpected behavior while using the value unset with the rule object-fit led me to question if there might be a rationale or workaround for this peculiar issue.

Demonstration

.block {
  &__img {
    width: 100%;
    height: 50%;
  }

  &--portrait {
    .block__img {
      width: unset;
      height: unset;
      object-fit: cover;
    }
  }
}

In the above code snippet, despite setting the image's height and width as unset along with the object-fit style rule (which should result in the image taking on the dimensions specified by cover), it seems that the image retains its original size. The query is why does unset impact a rule with a different property name?

Could there be some hidden interaction between object-fit, height, and width when the CSS is being processed?

Answer №1

When the CSS dimensions of an image are removed from the cascade, the image retains its intrinsic dimensions. Therefore, the image's box - which is generated by CSS for the image - will be displayed with those intrinsic dimensions (refer to sections 12.4.2 and 12.8.7 of CSS3). As a result, using object-fit: cover or object-fit: fill will produce similar outcomes since the aspect ratio of the box remains unchanged.

The issue described above is unrelated to the use of the unset keyword. The behavior of object-fit is directly impacted by the values assigned to height and width.

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 there a way to adjust the width of the info panel in an SVG to automatically match the width of the SVG itself?

I am looking to place the information panel at the bottom of my SVG map and have it adjust its width according to the width specified in the viewBox. This way, even if I resize the map, the info panel will automatically adjust to fill completely based on t ...

Stop text from being selected across all browsers in Firefox

My current CSS includes: *{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } If you visit http://jsfiddle.net/KyF5x/ and click be ...

What are the ways to incorporate the width property in @media queries within CSS?

I've been struggling to set the width inside @media in my code, but it's not working as expected. Here is what I have tried: mat-toolbar { app-toolbar-left { width: 35%; } app-toolbar-right { width: 22%; } } @me ...

Unleashing the power of Sass and CSS in your Next Js project

Trying to incorporate sass and css modules into my next.config.js has been challenging due to an error I keep encountering: Failed to compile. ./node_modules/@riskalyze/react-ui/node_modules/@riskalyze/calendar/assets/index.css Unknown word (1:1) > 1 ...

Issue with CSS background images

I'm having trouble trying to use this image as my background: . It just won't work... An error occurred while trying to set the background image. The declaration was dropped. Here is the HTML code: <div class="linkedin"></div> A ...

Implementing Jquery Table Selection with Custom CSS Class

When I attempted to use the selectable feature on a table with a CSS class applied, the selection did not work. However, when I removed the CSS class, the selection worked perfectly fine. I suspect that the issue lies within the CSS definition, but I' ...

The particles.js with absolute positioning is currently overlapping my div with relative positioning

Visit this link <div class="outer-container"> <div id="particles-js"> <div class="your-content"> <article id="3" class="bg-dusk transition md:group-hover:opacity-50 md:hover:opacity-important md:hov ...

Floating DIVs wrapped in a responsive layout

I can't help but wonder if I have a layout like this: <div class="container"> <div class="left"> Left </div> <div class="right> Right </div> </div> Changing the view port to 320 pixels requires the right div to ap ...

The body background position center does not function properly in Internet Explorer

I'm currently working on a website and facing some issues with the background-position property in CSS. Here is the code snippet that's giving me trouble: body { background-color: Black; background-image: url(images/background_ui.png); backg ...

Ensure that the standard icon is properly aligned with the stacked icon of equal size

Seeking guidance on aligning two icons to be the same size. Here is what I'm aiming for: https://i.sstatic.net/SHuH9.png However, in current development, they appear like this: https://i.sstatic.net/crfdl.png When attempting to resize the stack ic ...

Position icons and images on the right side, and the textarea on the left side of the page (using Twitter

Summary: Here is the desired end result shown in the image below. Alternatively, you can refer to the JSFiddle. Ideally, only CSS should be used without changing the DOM structure. The icons need to be aligned completely to the right using the .pull-right ...

Design a captivating Profile Picture form using HTML and CSS styling

In my form, I am looking to include a user's Profile picture which should be displayed in either a circular or rectangular shape. Initially, the image area will show a black background or a placeholder image. When the user clicks on this area, they sh ...

Slow rotation in CSS styling

.badge { -webkit-transform-style: preserve-3d; -webkit-perspective: 1000; position: relative; } .back, .front { position: absolute; -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform 1s ease-in; width: ...

Is it possible to enable tab navigation for a button located within a div when the div is in focus?

I have a component set up like this: (Check out the Code Sandbox example here: https://codesandbox.io/s/boring-platform-1ry6b2?file=/src/App.js) https://i.sstatic.net/ZuxdL.png The section highlighted in green is a div. Here is the code snippet: import { ...

Unable to use the ordered tag correctly in typing

Please review the HTML and CSS Code provided below: HTML : <ol> <li>Test</li> <li> <ol> <li>Sub-Chapter</li> <li>Sub-Chapter</li> </ol> < ...

Is it necessary for HTML "buttons" to follow the same box-model as other elements?

I recently encountered an issue with the button element and the input element when using a type of button. In both Firefox and Chrome, I noticed a behavior that seems like a bug in recent releases. However, as form elements often have exceptions to W3 rule ...

What could be causing the header's height to remain unchanged when using a percentage for its size?

I'm having trouble creating a header that takes up 20% to 40% of the body. When I try using percentages, it doesn't work but it works fine with pixels. Can someone explain why percentages aren't working for this? *{ margin:0; padding: ...

When the anchor tag is clicked, I'm displaying the DIV for Customer Testimonials, however, the expansion of its height is not

One way to display customer testimonials is by using flexslider to create a horizontal scroll. The testimonials are hidden and only shown when the "view all testimonials" link is clicked, which can be seen in this JSFiddle example: Working : Demo JQuery ...

Pedaling back and forth along a sequence

Is there a way to implement forward and backward buttons for a clickable list without using arrays, as the list will be expanding over time? I have already achieved changing color of the listed items to red, but need a solution to navigate through the list ...

Difficulty with animated presentations

As a developer with limited CSS experience, I am trying to create a CSS3 slideshow using only two images. After discovering some interesting code for this purpose, which can be found here, I decided to make a small change to the original code (specifically ...