Zoom In/out How Do I Keep The Aspect Ratio?

Working Example: http://jsfiddle.net/4jmY2/4/ If you Zoom in/out (ctrl +/-) you will see the elements move around, how can I keep the aspect ratio so the content will remain the sa

Solution 1:

Well, I finally had a go at doing this. I had to do it from scratch, and it took a while.

Live Demo

It looks like this for me:

• Tested in IE7/8 plus recent versions of Firefox, Chrome, Safari, Opera.
• You can zoom in!

If there's anything wrong or you have any questions, let me know.

HTML:

<div class="check_box">
    <div class="check">
        <span class="your_left"><em>Your Name</em><br />Your Address</span>
        <span class="your_mid"><em>Your Bank Name</em><br />Bank Address</span>
        <span class="your_right"><em>1001</em></span>

        <span class="date">Date<span></span></span>

        <span class="pay_to">Pay to the<br />Order of<span></span></span>
        <span class="dollar"><br />$<span></span></span>
        <span class="dollars"><span></span>Dollars</span>

        <span class="extraline"><span></span></span>

        <span class="numbers">
            <span>&#9288;<b>1001</b>&#9288;</span>
            <span>&#9286;<b>123456789</b>&#9286;</span>
            <span><b>987&nbsp;6543210</b>&nbsp;&#9288;</span>
        </span>
    </div>
</div>

CSS:

.check_box {
    font: 10px/1.3 Georgia, serif;

    border: 2px solid #1a1b1b;
    background-color: #dfe5e5;

    width: 292px;
    padding: 4px;
    margin: 0
}
.check {
    position: relative;
    height: 102px
}
.check > span {
    position: absolute
}
.check em {
    font-size: 12px;
    font-style: normal
}
.date span, .pay_to span, .dollar span, .dollars span, .extraline span {
    border-bottom: 1px solid #000;
    zoom: 1 /* fix ie7 */
}

.your_left {
    top: 0; left: 0
}
.your_mid {
    top: 0; left: 95px; text-align: center
}
.your_right {
    top: 0; right: 0
}

.date {
    top: 28px; right: 0
}
.date span {
    padding-left: 50px;
    margin: 2px 0 0 3px
}

.pay_to {
    top: 35px; left: 0
}
.pay_to span {
    padding-left: 180px;
    margin-left: 3px
}

.dollar {
    top: 35px; right: 0; text-align: right
}
.dollar span {
    padding-left: 50px;
    margin-left: 3px
}

.dollars {
    top: 62px; left: 0
}
.dollars span {
    padding-left: 250px;
    margin-right: 3px
}

.extraline {
    top: 76px; right: 0
}
.extraline span {
    padding-left: 120px
}

.numbers {
    bottom: 0; left: 0
}
.numbers span {
    margin: 0 10px 0 0
}

Solution 2:

Not sure that I understand your question. But when I zoom in, the text components scale up while the background "check" style does not.

It sounds like you want the check to scale up as well. If so, you might need to create em-driven div styles, which will scale with the browsers font selection.

Here's a good article with several examples.