Can I do image orientation detection with HTML or CSS?

css, html

Solution

No, this is not possible - conditional statements cannot be handled with HTML or CSS, but you have to do it with JS.

An example would be calculating (and perhaps storing for future use) the aspect ratio of an image to determine whether is it in landscape or portrait mode:

$(document).ready(function() {
    $("img").each(function() {
        // Calculate aspect ratio and store it in HTML data- attribute
        var aspectRatio = $(this).width()/$(this).height();
        $(this).data("aspect-ratio", aspectRatio);

        // Conditional statement
        if(aspectRatio > 1) {
            // Image is landscape
            $(this).css({
                width: "100%",
                height: "auto"
            });
        } else if (aspectRatio < 1) {
            // Image is portrait
            $(this).css({
                maxWidth: "100%"
            });
        } else {
            // Image is square
            $(this).css({
                maxWidth: "100%",
                height: "auto"
            });            
        }
    });
});

See fiddle here - http://jsfiddle.net/teddyrised/PkgJG/

2019 update: As ES6 is becoming the defacto standard, the above jQuery code can be easily refactored into vanilla JS:

const images = document.querySelectorAll('img');

Array.from(images).forEach(image => {
  image.addEventListener('load', () => fitImage(image));
  
  if (image.complete && image.naturalWidth !== 0)
    fitImage(image);
});

function fitImage(image) {
  const aspectRatio = image.naturalWidth / image.naturalHeight;
  
  // If image is landscape
  if (aspectRatio > 1) {
    image.style.width = '100%';
    image.style.height = 'auto';
  }
  
  // If image is portrait
  else if (aspectRatio < 1) {
    image.style.width = 'auto';
    image.style.maxHeight = '100%';
  }
  
  // Otherwise, image is square
  else {
    image.style.maxWidth = '100%';
    image.style.height = 'auto';
  }
}

div.wrapper {
    background-color: #999;
    border: 1px solid #333;
    float: left;
    margin: 10px;
    width: 200px;
    height: 250px;
}

<div class="wrapper">
    <img src="http://placehold.it/500x350" />
</div>
<div class="wrapper">
    <img src="http://placehold.it/350x500" />
</div>
<div class="wrapper">
    <img src="http://placehold.it/500x500" />
</div>

However, if all you want is to ensure the image fits within an arbitrary sized container, using simple CSS will work:

div.wrapper {
    background-color: #999;
    border: 1px solid #333;
    float: left;
    margin: 10px;
    width: 400px;
    height: 400px;
}

div.wrapper img {
  width: auto
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

<div class="wrapper">
    <img src="http://placehold.it/500x350" />
</div>
<div class="wrapper">
    <img src="http://placehold.it/350x500" />
</div>
<div class="wrapper">
    <img src="http://placehold.it/500x500" />
</div>

Problem

If I have an image on html page, can I use html or css do the following? When width of the image is greater than height, set height to a fixed value and auto stretch width; when height is greater than width, set width and auto stretch height? Thanks a lot!

Original source

Related problems