放大/缩小如何保持宽高比？ [英] Zoom in/out how do I keep the aspect ratio?

查看：151
本文介绍了放大/缩小如何保持宽高比？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

工作示例： http://jsfiddle.net/4jmY2/4/



如果你放大/缩小（ctrl +/-），你会看到元素移动，我如何保持高宽比，所以内容将保持不变，无论什么尺寸？



HTML 

 < div class =check_box> 
< div class =check> 
< div class =your_name>您的姓名< / div> 
< div class =bank_name>您的银行名称< / div> 
< div class =check_number_top> 1001< / div> 
< div class =your_address>您的地址< / div> 
< div class =bank_address>银行地址< / div> 
< br /> 
< div class =date>日期________< / div> 
< br /> 
< div class =pay>支付给< br />订单_______________________________ $ ________< / 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; / *需要改变字体的数字* / 
} 
 .routing_number {
 float：left; 
 padding：0px 0px 0px 5px; 
 font-size：85％; 
 font-family：Arial Narrow; / *需要更改字体的数字* / 
} 
 .account_number {
 float：left; 
 padding：0px 0px 0px 10px; 
 font-size：85％; 
 font-family：Arial Narrow; / *需要改变数字的字体* / 
} 
 .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; 
}


解决方案

去做这个。我必须从头开始做，花了一会儿。



现场演示



它看起来像这样：






  • 在IE7 / 8以及Firefox，Chrome，Safari和Opera近期版本中测试。

  • 您可以放大！



      • 如果有任何错误或有任何问题，请告诉我们。



      HTML： 

       < div class =check_box> 
      < div class =check> 
      < span class =your_left>< em>您的姓名< / em>< br />您的地址< / span> 
      < span class =your_mid>< em>您的银行名称< / em>< br />银行地址< / span> 
      < span class =your_right>< em> 1001< / em>< / span& 
       
      < span class =date>日期< span>< / span>< / span> 
       
      < span class =pay_to>支付< br />订单< span>< / span>< / span& 
      < span class =dollar>< br /> $< span>< / span>< / span& 
      < span class =dollars>< span>< / span>美元< / 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 
      }


      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 same no matter what size?

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

      解决方案

      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
}

      这篇关于放大/缩小如何保持宽高比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆