一、简介

他们是为流而生的，像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. MySQL创建表、更改表和删除表

    1.创建表 mysql> create table t_address( -> id int primary key auto_increment, // 设置id为主键,自动增值 -&g ...

  2. spring 中<ref parent="">标签是什么意思；ref标签与ref属性有什么不同；子容器如何引用父容器的bean

    spring的配置文件可能会有多个<property name="a" ref="b" />就是找当前配置文件里的bean 也就是id为b的 < ...

  3. Python：Scrapy（四） 命令行相关

    学习自Scrapy 2.4.1 documentation 这一部分是对官方文档的学习,主要是理解翻译,来对之前的应用部分进行详细的理论补充. 1.保存爬取到的要素的方式: ①运行scrapy指令时, ...

  4. 操作Jexus

    jws.start等命令在Jexus V5.6.3中已经合并为一个单一命令,即"jws",这是一个shell脚本文件. 命令参数与对应的功效: jws start : 启动Jexu ...

  5. PromQL全解析

    PromQL(Prometheus Query Language)为Prometheus tsdb的查询语言.是结合grafana进行数据展示和告警规则的配置的关键部分. 本文默认您已了解Promet ...

  6. 【爬虫】让我沉醉的python爬虫技术

    今天终于有机会好好学习我一直梦寐以求想掌握的爬虫技术,其实爬虫技术涉及的面不多,我力求做到精通写在简历上. 1.工程分析流程 (1)需求分析 ①目标网站:②抓取内容:③存储格式. (2)项目实施 分析 ...

  7. PHP日常错误总结

    session问题 问题描述 初到公司开发的项目在本地测试没有问题,部署到线上之后出来验证码一直错误,或者是CSRF token mismatch. 这些问题都是和session有关系,打开两个页面, ...

  8. petite-vue源码剖析-ref的工作原理

    ref内部的工作原理十分简单,其实就是将指令ref.:ref或v-bind:ref标识的元素实例存储到当前作用域的$refs对象中,那么我们就可以通过this.$refs获取对应的元素实例.但由于作用 ...

  9. min_25 筛学习小记

    min_25筛 由 dalao min_25 发明的筛子,据说时间复杂度是极其优秀的 \(O(\frac {n^{\frac 3 4}} {\log n})\),常数还小. 1. 质数 \(k\) 次 ...

  10. SQL基础语法_张三

    1.1 建库表语法 1.2 字段数据类型 大致可以分为三类:数值.日期/时间和字符串 (字符)类型. 2. 增删查改 3. 关联查询 4. 子查询