zoukankan      html  css  js  c++  java
  • 图片等比例自动拉伸缩放解决方案总结

    首先,准备两个原图:

           图一)宽>高,宽为200px

                          图二)高>宽,高为200px

    需求一)原图居中

        150px*150px

       250px*250px

    需求二)等比例缩放,最大边撑满,其余留空

       150px*150px

       250px*250px

     需求三)等比例缩放,最小边撑满,不留空

        150px*150px

       250px*250px

    解决方案一)使用background

    <style type="text/css">
      .box { width: 任意宽; height: 任意高; background: #f0f0f0; }
        /*需求一)原图居中*/     .box .bg { width: 100%; height: 100%; background: url('xxx.jpg') center center no-repeat; }     /*需求二)等比例缩放,最大边撑满,其余留空*/     .box .bg { width: 100%; height: 100%; background: url('xxx.jpg') center center no-repeat; background-size: contain; }     /*需求三)等比例缩放,最小边撑满,不留空*/     .box .bg { width: 100%; height: 100%; background: url('xxx.jpg') center center no-repeat; background-size: cover; } </style> <div class="box">   <div class="bg"></div> </div>

    解决方案二)使用img+宽高auto(部分场景无法满足,不推荐)

    通过设置img标签的width或height,可以解决需求一:原图居中。

    解决需求二,只能满足以下2种情况:1)图片宽或高>=容器  2)已知图片比较宽还是比较高

    解决需求三,必须已知图片比较宽还是比较高

    <style type="text/css">
      .box { width:; height:; background: #f0f0f0;position: relative; overflow: hidden; }
    
        /*需求一)原图居中*/
        .box img { width: auto; height: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);  }
        /*需求二)等比例缩小,最大边撑满,其余留空(当图片宽或高>=容器)*/
        .box img { width: auto; height: auto; max-width:100%;max-height:100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
        /*需求二)等比例缩放,最大边撑满,其余留空(当图片宽>高)*/
        .box img { width: 100%; height: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
        /*需求二)等比例缩放,最大边撑满,其余留空(当图片高>宽)*/
        .box img { width: auto; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
        /*需求三)等比例缩放,最小边撑满,不留空(当图片宽>高)*/
        .box img { width: auto; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
        /*需求三)等比例缩放,最小边撑满,不留空(当图片高>宽)*/
        .box img { width: 100%; height: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
    </style>
    <div class="box">
      <img src="xxx.jpg" />
    </div>

    解决方案三)使用img+object-fit(CSS3)

    在css3中提供了一个object-fit,类似于background-size,可参见https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

    此方法必须浏览器支持css3或提供兼容。

    <style type="text/css">
      .box
    { width:; height:; background: #f0f0f0; }
        /*需求一)原图居中*/     .box img { width: 100%; height: 100%; object-position: center center; object-fit: none; }     /*需求二)等比例缩放,最大边撑满,其余留空*/     .box img { width: 100%; height: 100%; object-position: center center; object-fit: contain;}     /*需求三)等比例缩放,最小边撑满,不留空*/     .box img { width: 100%; height: 100%; object-position: center center; object-fit: cover;} </style> <div class="box">   <img src="xxx.jpg" /> </div>
  • 相关阅读:
    NHibernate中多表(对象)间的查询
    将datagrid数据导到excel的一个问题
    win2003<IIS6>部署.net 4.0<asp.net 4>
    C# 单元测试
    office2010 word发布博客 博客园
    语义化的HTML首先要强调HTML结构
    SQL Server 2005 安装(各种错误)
    SWFUpload V2.2.0 说明文档
    SQL Server 复制, 集群
    高亮插件测试
  • 原文地址:https://www.cnblogs.com/kandyvip/p/12327466.html
Copyright © 2011-2022 走看看