一、简介

他们是为流而生的，像width/height这种定死的砖头式布局，min-width/max-width就没有存在的意义 ，min-width/max-width一定是自适应布局或流体布局中。常应用于表格或图片

目的

最近有个需求是想“批量打印图片”，而因此在打印时就会出现，图片过大，不能达到一张图一张纸的效果，

而有些图过小，让其一张纸容纳了两张图，同样不满足要求，那怎么做到符合要求的，我的想法是：将图片比例设置成符合长宽既可，

但新的问题又来了，如果强行设置长宽，就会导致一些图片变形，这也不是我们想要的效果，

接着才想到，将图片同比例缩放，保证图片的完整性，至于一张容纳多张的问题，我们就加个div来进行高度限制死的设置，让其满足一张纸，

思路建设好后，就找打印的方法，结果发现打印的方式有好几种， 如：

第一种：桌面图片右击打印【我在java中掉不出来，希望评论区有大神可以教下小弟】

第二种：页面打印【这种我就会了，这里是html的js中用window就可以获取到当前页面对象，然后调用print()方法就可以使用了（代码：window.print();）】

二、最大高度【max-height】

可以让图片限制到最大高度

其他案例可参考：https://picker.blog.csdn.net/article/details/120449941

三、最大宽度【max-width】

可以让图片限制到最大宽度

其他案例可参考：https://picker.blog.csdn.net/article/details/120449941

四、属性值

值 描述
none 默认。定义对元素的最大宽度没有限制。
length 定义元素的最大宽度值。
% 定义基于包含它的块级对象的百分比最大宽度。
inherit 规定应该从父元素继承 max-width 属性的值。

五、案例

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <div style="height: 250mm;" align="center">

        <img style="max-height: 250mm; max-width: 210mm" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F12%2F1f%2Fa0%2F121fa0f4730a034237c13b7595db3a16.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640749219&t=4c17df14b38735aa3f3a17a137c0e15e"/>

    </div>

    <div style="height: 250mm;" align="center">

        <img style="max-height: 250mm; max-width: 210mm" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0512210S939%2F2105120S939-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640749249&t=e7e056fdac27c859e4d618f73629069e"/>

    </div>

</div>

</body>

<script>

    window.print();

</script>

</html>

结果

一张图一张A4纸效果

css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放，达到图片不变形目的，做出批量打印图片功能,页面打印“window.print()”的更多相关文章

  1. css 如何实现图片等比例缩放

    在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 1 ...

  2. CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个元素（转）

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  3. Web---Cookie技术(显示用户上次登录的时间、显示用户最近浏览的若干个图片(按比例缩放))

    本章博客讲解: 1.Cookie基本用法演示 2.演示Cookie的访问权限 3.演示Cookie的删除 4.利用Cookie显示用户上次登录的时间 5.利用Cookie技术显示用户最近浏览的若干个图 ...

  4. css中图片等比例缩放

    li img{ display: inline-block; max-height: 60px; max-width: 60px; vertical-align: middle; }

  5. css实现图片等比例缩放

    <div class="box"> <img src="01.jpg"/> </div> .box{ } //只要给图片设置 ...

  6. CSS实现图片快速等比例缩放，效果佳

    初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果. 这里提供一种纯CSS的图片缩放功能,请看代码: <style type="text/css&quo ...

  7. 【转载】如何让图片按比例响应式缩放、并自动裁剪的css技巧

    原文: http://blog.csdn.net/oulihong123/article/details/54601030 响应式网站.移动端页面在DIV CSS布局中对于图片列表或图片排版时, 如果 ...

  8. css如何实现图片响应式等比例缩放，裁剪

    <div class="bg_picWrapper"  :style="{backgroundImage:'url('+img+')'}">---- ...

  9. CSS3-基于浮动的布局，响应式WEB设计，定位网页上的元素，设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

随机推荐

  1. C#基于Redis实现分布式锁

    [本博客属于原创,如需转载,请注明出处:https://www.cnblogs.com/gdouzz/p/12097968.html] 最近研究库存的相关,在高峰期经常出现超卖等等情况,最后根据采用是 ...

  2. vue+element ui后台遇到的坑

    今天在用elementui做后台系统,遇到第一个坑:分页显示的是英文 按照官网组件复制下来的代码: <el-row :gutter="0" style="margi ...

  3. Qt：QNetworkAccessManager

    0.说明 QNetworkAccessManager允许应用发送Request并接受回应. 网络访问API是围绕一个QNetworkAccessManager对象构建的,该对象保留了所有它发送的请求的 ...

  4. k8s 中 nfs作为存储的三种方式

    1.安装nfs服务.直接给命令 yum install nfs-utils vim /etc/exports /data/k8s/ 172.16.1.0/24(sync,rw,no_root_squa ...

  5. IIS部署vue项目页面刷新404,url重写问题解决办法

    这里需要用到URL重写工具 --URL Rewrite(默认没有,需要自己下载安装) 如果IIS上默认有安装Web平台安装程序,我们可以使用平台自动安装URL Rewrite重写工具,打开IIS在管理 ...

  6. MySQL[练习|面试题]-我的租房网

    1 # 创建数据库 2 CREATE DATABASE Tenement; 3 4 # 切换数据库 5 USE Tenement; 6 # 创建客户信息表 sys_user 7 CREATE TABL ...

  7. Scala语法1

    目录 main方法和def 函数 变量,类型转换,字符串分割拼接 文件读写和JDBC 面向对象编程 继承 case类,最常用的 main方法和def 函数 package scala_01 /** * ...

  8. springboot-jta-atomikos多数据源事务管理

    背景 我们平时在用springboot开发时,要使用事务,只需要在方法上添加@Transaction注解即可,但这种方式只适用单数据源,在多数据源下就不再适用: 比如在多数据源下,我们在一个方法里执行 ...

  9. 学习Java集合

    1.列表  List接口(继承于Collection接口)及其实现类 List接口及其实现类是容量可变的列表,可按索引访问集合中的元素. 特点:集合中的元素有序.可重复: 列表在数据结构中分别表现为: ...

  10. CentOS Linux服务器安装Nginx

    1.安装nginx前,我们首先要确保系统安装了g++.gcc.openssl-devel.pcre-devel和zlib-devel软件,可通过如图所示命令进行检测,如果以安装我们可以通过图二所示卸载 ...