5480

Exclusive Aspect Ratio Media Query

Question:

I want to have a picture at the side of my site only if the browser width is >1200 px, but I want to use one of two pictures depending on the aspect ratio. I suppose I need to use

@media all and (min-width: 1201px) and (min-aspect-ratio: 8/5){ #div {background-image:url(pic1.jpg);}} @media all and (max-width: 1201px) and (max-aspect-ratio: 8/5){ #div {background-image:url(pic2.jpg);}}

However I worry that if the window is exactly 8:5, the user will have to download both images.

Any help on how to make sure only one image loads would be much appreciated, thanks

Answer1:

After a bit of testing, it turns out you don't need to change a thing:

@media (min-aspect-ratio: 8/5) {...} @media (max-aspect-ratio: 8/5) {...}

I made a demo. Open it in full size and resize the browser. They'll never be both the same (true or false).

<pre class="snippet-code-css lang-css prettyprint-override">body {margin: 0;} .\31\30\30\25 { display: flex; min-height: 100vh; background-color: #eee; justify-content: center; } .\35\30\25 { flex-basis: 50%; min-height: 50vh; border: 1px solid #eee; background-color: #fff; align-self: center; box-shadow: 0 1px 5px 0 rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12); position: relative; } .\35\30\25:before, .\35\30\25:after { padding: 20px; background-color: rgba(255,255,255,.75); border: 1px solid white; position: absolute; width: calc(25vw - 40px); box-sizing: border-box; color: red; } .\35\30\25:before { right: calc(100% + 20px); transform: translateY(-50%); content: 'not above 8/5'; text-align: right; } .\35\30\25:after { left: calc(100% + 20px); bottom: 0; transform: translateY(50%); content: 'not below 8/5' } @media (min-aspect-ratio: 8/5){ .\35\30\25:before { content: 'above 8/5'; color: black; } } @media (max-aspect-ratio: 8/5){ .\35\30\25:after { content: 'below 8/5'; color: black; } } <pre class="snippet-code-html lang-html prettyprint-override"><div class="100%"> <div class="50%"> </div> </div>

While testing the above in full width and setting browser window to be exactly 800px x 500px it says not above 8/5 and below 8/5. I tested it in IE10, FF and Chrome.

However, if you want to make extra sure that only one applies, you don't have to rely on browsers. Even if both conditions are ever true, <strong>if you modify the same property of the same element</strong> for both media queries, only one will apply:

@media (min-aspect-ratio: 8/5) { [same-selector] { [same-property]: [some-value]; } } @media (max-aspect-ratio: 8/5) { /* * This one will apply if both media conditions are ever true. * If you want the other one, place that media query below this one. */ [same-selector] { [same-property]: [different-value]; } }

If two rules apply on the same property of the same element, the one with the stronger selector applies or, if the selector is identical, the last one parsed by CSS applies. And there you have it! The last one you place in CSS, that's the one that applies when both conditions are true, if they ever are true simultaniously.

Recommend

  • Add Jpanel to Jframe NetBeans
  • How to convert Neo4j Result to GraphJSON
  • Recursion in ASP.NET Core Razor views
  • How to remove left and right margins from all wrapped rows in flexbox (without nth-child or js)
  • undefined reference to `SOIL_load_OGL_texture'?
  • You tube videos are not playing
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • Portable JRE on Linux - possible?
  • Problem with Django using Apache2 (mod_wsgi), Occassionally is “unable to import from module” for no
  • Why use database factory in asp.net mvc?
  • saving file generated by TCPDF
  • Loading .coffee files via a view in Rails
  • HTTP/2 streams vs HTTP/1.1 connections
  • preg_replace Double Spaces to tab (\\t) at the beginning of a line
  • print() is showing quotation marks in results
  • Content-Length header not returned from Pylons response
  • Make VS2015 use angular-cli ng at build time in a .NET project
  • Python urlparse: small issue
  • Android fill_parent issue
  • Change multiple background-images with jQuery
  • ImageMagick, replace semi-transparent white with opaque white
  • Syntax for setting draggablecursor property in google maps api
  • Android screen density dpi vs ppi
  • Get object from AWS S3 as a stream
  • Controls, properties, events and timers running in design time
  • How to redirect a user to a different server and include HTTP basic authentication credentials?
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Can I make an Android app that runs a web view in Chrome 39?
  • sending/ receiving email in Java
  • Updated Ionic CLI but shows previous version (Windows)
  • Change an a tag attribute in JavaScript based on screen width
  • GridView Sorting works once only
  • Calling of Constructors in a Java
  • Traverse Array and Display in markup
  • Transpose CSV data with awk (pivot transformation)
  • How to get icons for entities from eclipse?
  • Benchmarking RAM performance - UWP and C#
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • LevelDB C iterator
  • Linking SubReports Without LinkChild/LinkMaster