一、简介

他们是为流而生的，像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. 苹果如何控制android手机,安卓手机怎么控制苹果？

    小编经常通过手机远程控制别人手机,帮助他人解决一些电脑问题,另外还经常需要通过远程电脑控制服务器,管理脚本之家的服务器等等,可能这些对大家都没有什么诱惑,今天笔者为大家带来一个非常有趣的手机控制电脑的 ...

  2. shell脚本上传sftp文件

    转至:https://blog.csdn.net/sxh6365966/article/details/83385711 #!/bin/bash #SFTP配置信息 #用户名 YEARS=`date ...

  3. Pycharm:设置自带控制台的python版本

    之前在用chr将一个编码转化为对应的字符时,出现以下提示 chr() arg not in range(256) 后来发现,只有python2.x才会出现这种情况,python3.x统一使用unico ...

  4. feign服务中调用，传递token

    默认spring-boot 微服务中 用feign来做服务间调用,是不会携带token传递的.为了能让服务间调用的时候带上token,需要进行配置,增强resTemplate   1.先实现请求拦截器 ...

  5. Mac下如何自动备份目录到七牛云?

    原文链接 七牛云是个很好用的图床,但是 Mac 下并没有什么很好用的客户端,每次上传都需要在网页上手动一个个传文件,十分麻烦,于是仔细看了下七牛云的部分文档,打算使用QRSBox来自动上传图片. QR ...

  6. pd.cut和pd.qcut（）之间的区别

  7. 20192204李龙威 2019-2020-2 《Python程序设计》实验三报告

    20192204李龙威 2019-2020-2 <Python程序设计>实验三报告 课程:<Python程序设计> 班级: 1922 姓名: 李龙威 学号:20192204 实 ...

  8. LGP6146题解

    思维僵化了,习惯按照右端点排序,没想到是按照左端点排序... 考虑从左到右依次加入线段,考虑贡献. 设前 \(i\) 条线段的答案为 \(dp[i]\). 考虑两种情况: 不加,贡献为 \(dp[i- ...

  9. vue-cli实现异步请求返回mock模拟数据

    在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...

  10. Knife4j添加lombok及注解初探

    一.POM添加 在pom文件里添加包 1 <!-- 添加Lombok插件--> 2 <dependency> 3 <groupId>org.projectlombo ...