一、简介

他们是为流而生的，像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# 锁】SpinWait结构 -同步基元|同步原语

    锁提供了线程安全三要素中的 有序性.二.SpinWait是同步锁的核心,而Thread是SpinWait的核心. Spinwait结构 完成代码:SpinWait.cs (dot.net) SpinW ...

  2. idea看不到class文件

    Ctrl + Shift + Alt + S进入Project Structure,或者File -> Project Structure,点开文件夹或Source,class文件就出现了

  3. weblogic补丁安装失败

    转至:https://www.cnblogs.com/lsdb/p/7234989.html weblogic补丁安装失败(Patch B25A is mutually exclusive and c ...

  4. Vim的强大配置文件（一键配置）

    转:https://blog.csdn.net/u010871058/article/details/54253774/ 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim配置主要有以下优点 ...

  5. JZ-043-左旋转字符串

    左旋转字符串 题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S, 请你把其循环左移K位后的序列输出.例如,字符 ...

  6. ShardingJdbc-分表;分库;分库分表;读写分离;一主多从+分表;一主多从+分库分表;公共表;数据脱敏;分布式事务

    目录 创建项目 分表 导包 表结构 Yml 分库 Yml Java 分库分表 数据库 Yml 读写分离 数据库 Yml 其他 只请求主库 读写分离判断逻辑代码 一主多从+分表 Yml 一主多从+分库分 ...

  7. 小程序base64图片格式保存至手机相册

    // 保存图片至相册 saveImg() { //获取文件管理器对象 const fs = wx.getFileSystemManager() //文件保存路径 const Imgpath = wx. ...

  8. .Net Core(.NET6)中接入Log4net和NLog进行日志记录

    一.接入Log4net 1.按日期和大小混合分割日志 nuget包安装 log4net Microsoft.Extensions.Logging.Log4Net.AspNetCore 配置文件 配置文 ...

  9. 1251-Client does not support authentication protocol requested by server; consider upgrading MySQL client。

    三:出现的一个错误在安装完MySQL的时候,我们现在一般都使用Navicat来连接数据库,可惜出现下面的错误:1251-Client does not support authentication p ...

  10. 假设检验的python实现命令——Z检验、t检验、F检验

    Z检验 statsmodels.stats.weightstats.ztest() import statsmodels.stats.weightstats as sw 参数详解: x1:待检验数据集 ...