Question

如果你放大/缩小（ctrl +/-），你会看到元素四处移动，我怎样才能保持宽高比，这样无论大小多大，内容都会保持不变？

HTML

<div class="check_box">        
    <div class="check">
        <div class="your_name">Your Name</div>
        <div class="bank_name">Your Bank Name</div>
        <div class="check_number_top">1001</div>
        <div class="your_address">Your Address</div>
        <div class="bank_address">Bank Address</div>
        <br />
        <div class="date">Date ________</div>
        <br />
        <div class="pay">Pay to the<br />Order of _______________________________ $________</div>
        <br />
        <div class="pay_line">_________________________________________ Dollars</div>
        <br />
        <div class="sign">_____________________</div>
        <br />
        <div class="check_number_bottom">&#9288;<strong>1001</strong>&#9288;</div>
        <div class="routing_number">&#9286;<strong>123456789</strong>&#9286;</div>
        <div class="account_number"><strong>987&nbsp;6543210</strong>&nbsp;&#9288;</div>
    </div>
</div>

CSS

.check_box {
    width: 300px;
}
.check {
    border: 2px solid #1A1B1B;
    background-color: #DFE5E5;
    height: 110px;
    font-size:80%;
    font-family: Georgia;    
    padding:0px;
    margin: 0px;    
}
.your_name {
    float:left;
    padding:0px 30px 0px 5px;
    font-size:105%;
}
.your_address {
    float:left;
    padding:0px 40px 0px 5px;
    font-size:85%;
}
.bank_name {
    float:left;
    padding:0px 30px 0px 5px;
    font-size:105%;
}
.bank_address {
    float:left;
    padding:0px 30px 0px 5px;
    font-size:85%;
}
.check_number_top {
    float:left;
    padding:0px 0px 0px 40px;
    font-size:105%;
}    
.date {
    float:left;
    padding:0px 0px 0px 220px;
    font-size:85%;
}
.pay {
    float:left;
    padding:0px 0px 0px 5px;
    font-size:85%;
}
.pay_line {
    float:left;
    padding:0px 0px 0px 5px;
    font-size:85%;
}
.sign {
    float:left;
    padding:0px 0px 0px 165px;
    font-size:85%;
}
.check_number_bottom {
    float:left;
    padding:0px 0px 0px 5px;
    font-size:85%;
    font-family:"Arial Narrow"; /* need to change the font's of the numbers */
}
.routing_number {
    float:left;
    padding:0px 0px 0px 5px;
    font-size:85%;
    font-family:"Arial Narrow"; /* need to change the font's of the numbers */
}    
.account_number {
    float:left;
    padding:0px 0px 0px 10px;
    font-size:85%;
    font-family:"Arial Narrow"; /* need to change the font's of the numbers */
}
.routing_number_tip {
    float:left;
    padding:0px 0px 0px 10px;
    font-size:85%;
    color:#1F4CA5;
}
.account_number_tip {
    float:left;
    padding:0px 0px 0px 10px;
    font-size:85%;
    color:#1F4CA5;
}

Answer 1

好吧，我终于有了这样做。我必须从头开始做，这需要一段时间。

Live Demo

对我来说看起来像这样：

在IE7 / 8以及最近版本的Firefox，Chrome，Safari，Opera中进行了测试。
你可以放大！

如果有任何问题或您有任何疑问，请与我联系。

<强> 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
}

Answer 2

不确定我理解你的问题。但是当我放大时，文本组件会向上扩展，而背景“检查”样式则不会。

听起来你想要支票也要扩大规模。如果是这样，您可能需要创建由em驱动的div样式，这些样式将随浏览器字体选择而缩放。

这是一个很好的article with several examples。

放大/缩小如何保持纵横比？

2 个答案: