一、简介

他们是为流而生的，像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. windbg调试命令

    重要 (1) windbg命令分为标准命令(40个左右),元命令(一百多个)和扩展命令. 标准命令提供最基本的调试功能,不区分大小写.如:bp g dt dv k等 元命令提供标准命令没有提供的功能, ...

  2. 无法打开备份设备,出现操作系统错误 5(拒绝访问)(sql server备份)

    问题:无法打开备份设备 .出现操作系统错误 5(拒绝访问) 原因:你用sqlserver进行备份的时候,必须要是完整的路径,操作sqlserver的和磁盘有关的路径都必须要到文件名这一层. 解决方案: ...

  3. ElementUI Tree树形控件renderContent return时报错

    问题描述: 使用Tree树形控件使用render-content渲染时return后报错或npm run dev时候报错,报错信息相同,如下: 问题分析: renderContent函数中需要使用js ...

  4. （七）目标检测算法之SSD

    系列博客链接: (一)目标检测概述 https://www.cnblogs.com/kongweisi/p/10894415.html (二)目标检测算法之R-CNN https://www.cnbl ...

  5. 树莓派4B安装 百度飞桨paddlelite 做视频检测 （一、环境安装）

    前言: 当前准备重新在树莓派4B8G 上面搭载训练模型进行识别检测,训练采用了百度飞桨的PaddleX再也不用为训练部署环境各种报错发愁了,推荐大家使用. 关于在树莓派4B上面paddlelite的文 ...

  6. 07-Spring整合Mybatis

    Spring之整合Mybatis 整合核心思路 由很多框架都需要和Spring进行整合,而整合的核心思想就是把其他框架所产生的对象放到Spring容器中,让其成为Bean. 比如Mybatis,Myb ...

  7. @PostConstruct使用注意点

    前景提要:在一个项目中,由于数据库中敏感词删除掉了,但是在网页进行匹配时仍然能够匹配上已删除的词. 查看项目源码发现使用了@PostConstruct注解: 此注解的作用是:@PostConstruc ...

  8. 面试题--Nginx

    Nginx面试题 整理自网络,侵权删 1.请解释一下什么是Nginx? Nginx是一个web服务器和反向代理服务器,用于http.https.smtp.pop3和IMAP协议 2.请列举Nginx的 ...

  9. 微信小程序表单验证（WxValidate使用）

    参考博客: https://www.cnblogs.com/zhangxiaoyong/p/10166951.html https://github.com/wux-weapp/wx-extend/b ...

  10. shuffle()和sns.FacetGrid()定义