Image height of 15%, and when screen size is less than the image width wide, scale height?

Question

I am making a responsive design website. What I want to do, is have my logo always have a height of 15% the window. This causes issues on mobile devices because my logo is a little long.

I want the logo to start shrinking when we run out of horizontal room. Here is what I have so far:

<img style="height: 15%; max-width: 100%" src="logo.png"/>

This looks fine on a regular screen, but when I get down smaller, it shrinks horizontally, but not vertically (the logo happens to have a few pixels of alpha on the right):

As you can tell, this is not desired and I would like the height to scale with the width in this case.

score 2 · Answer 1 · answered Feb 22 '16 at 00:11

In this case, I would strongly recommend using media queries.

You can use media queries to change property values for different resolutions.

Find the breakpoint where your logo cuts off, the use a media query to set a max-width and max-height on your logo.

You'll want to target your logo specifically, by assigning an ID to it, like this:

<img src="logo.png" id="logo">

Then, use a media query for the logo. This example sets the maximum height and width for your logo on common mobile devices:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#logo {
max-width:20px;
max-height: 20px;
}

You can still use percentages or pixels in the media query, just play around with it until it looks good :)

score 1 · Answer 2 · answered Feb 21 '16 at 23:50

1

If you're dead set on wanting the height to always be 15%, then you're looking for vh, a unit that's relative to the height of the viewport:

<img style="height: 15vh;">

Be careful with this though as the image may get distorted if you start messing the the height and width dimensions. If you want the image to be responsive, the general method would be: width: 100%, height: auto.

answered Feb 21 '16 at 23:50

Kyle Truong

2,545
8
34
50

If I use `width: 100%; height: auto`, then the height isn't scaled. I need to do both. – Chris Smith Feb 21 '16 at 23:54

score 1 · Accepted Answer · answered Feb 22 '16 at 01:22

I came up with a solution using Javascript:

<div id="logocontainer" style="width: 100%; padding: 10px; background-color: #4CAF50;">
    <img id="logo" class="logo" src="assets/neon-orb/logo-large.png"/>
    <script>
        function getViewport() { // taken from: http://stackoverflow.com/a/2035211/3171100

            var viewPortWidth;
            var viewPortHeight;

            // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
            if (typeof window.innerWidth != 'undefined') {
                viewPortWidth = window.innerWidth,
                viewPortHeight = window.innerHeight
            }

            // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
            else if (typeof document.documentElement != 'undefined'
                    && typeof document.documentElement.clientWidth !=
                    'undefined' && document.documentElement.clientWidth != 0) {
                viewPortWidth = document.documentElement.clientWidth,
                viewPortHeight = document.documentElement.clientHeight
            }

            // older versions of IE
            else {
                viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
                viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
            }
            return [viewPortWidth, viewPortHeight];
        }

        var resize = function(){
            var logoWidth = $("#logo").get(0).offsetWidth;
            var logoContainerWidth = $("#logocontainer").get(0).offsetWidth;

            var logoHeight = $("#logo").get(0).offsetHeight;
            var windowHeight = getViewport()[1];
            console.log($("#logocontainer").css("padding-left"));
            if(logoWidth > logoContainerWidth - parseFloat($("#logocontainer").css("padding-left")) - parseFloat($("#logocontainer").css("padding-right"))){
                $("#logo").css("height", "auto");
                $("#logo").css("width", "100%");
            } else if(logoHeight / windowHeight > 0.15){
                $("#logo").css("height", "15vh");
                $("#logo").css("width", "auto");
            }
        };

        $(window).resize(resize);

        $("#logo").css("height", "15vh");
        $("#logo").css("width", "auto");

        resize();
    </script>
</div>

Image height of 15%, and when screen size is less than the image width wide, scale height?

3 Answers3