How can I disable zoom for cover page?

Question

I created a cover page for my web, how can I disable zooming or simulate the effect so the image, the slogan and the logo always have the same size?

Answer 1

You can disable zooming for mobile devices by inserting a tag like this in the html document:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

(more info available at: https://gist.github.com/JiLiZART/3132542 and How can I "disable" zoom on a mobile web page?)

You cannot disable zooming for browsers like chrome (ctrl +, ctrl -, cmd +, cmd -, scrollwheel etc). This rendering is handled by the browser and your best option is to come up with responsive CSS styling if you want to prevent the slogan and logo from becoming distorted at different scales. (more info available at: disable the CTRL/Wheel zoom effect at runtime)

One last wacky option might be to make the slogan and logo an embedded flash object but it's not recommended.

Answer 2

It is possible to add the image as a background to to a DIV, and set the size to the DIV. Even that the user makes zoom, the image keeps its size.

<div id="the_img">
</div>

And the CSS:

#the_img {
    width: auto;
    height: 300px; /* Preferred size */
    background-image: url('http://i.imgur.com/JNY1o.jpg'); /* image */
    background-size: cover;
    background-position: center center;
}

Check the code on http://jsfiddle.net/4MFpu/