首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    padding实现图片等比例自适应

    对于绝大多数都布局,我们并不要求非要比例固定,但是有一种情况例外,那就是图片,因为图片原始尺寸它是固定的。...在传统的固定宽度的布局下,我们会通过给图片设定具体的宽度和高度值,来保证我们的图片占据区域稳固;但是在移动端或者在响应式开发情况下,图片最终展现的宽度很可能是不确定的,例如手机端的一个通栏广告,iPhone7...对于复杂布局,如果图片的宽度是不固定的自适应的,我们通常会想到这么一个取巧的做法,就是只设定图片的宽度,例如: img { width: 100%; } 此时浏览器默认会保持图片比例显示,图片宽度大了,...缩小浏览器宽度可以看到不同宽度下的布局效果,Gif效果截图如下: 此demo难点就是图片自适应同时保持比例,以及页面刷新的时候没有布局稳固不晃动,其核心HTML和CSS代码如下: <div class=...但,有时候,图片宽度并不是100%容器的,例如,图片宽度50%容器宽度,图片高宽比4:3,此时,CSS垂直方向百分比就666了,如下: .img-box { padding: 0 50% 66.66%

    2.8K10

    Python等比例压缩与质量处理图片

    项目上需要保存高清图片,不希望图片压缩太多,故分享一下Python下面的图片高质量保存,内容基于常用的PIL和opencv 一.Python PIL 1、在使用PIL image处理图像要获取高质量的关键地方是下面两点...Python OpenCV 1、使用opencv保存图像 cv2.imwrite(存储路径,图像变量, [存盘标识]) 2、存盘标识说明:  1、cv2.CV_IMWRITE_JPEG_QUALITY 设置图片格式为....jpeg或者.jpg的图片质量,其值为0---100(数值越大质量越高),默认95 2、cv2.CV_IMWRITE_WEBP_QUALITY 设置图片的格式为.webp格式的图片质量,值为0...压缩比越大),默认为3 3、存盘标识示例: cv2.imwrite('img.jpg',img,[int(cv2.IMWRITE_JPEG_QUALTY),70]) 把img变量保存到img.png,图片品质为...70 4、不同类型图片说明: 保存png图像,图像后缀必须为.png,图像质量0-9,默认为3,0质量最好,9最差。

    1.8K20

    【每周一坑】缩小图片尺寸

    之前我们的题目大多偏向解决数学问题,今天来一道偏应用的: 我们知道,通常来说一张图片的分辨率越高,它就越清晰,但文件占用的空间就越大。有时候我们并不需要那么高的清晰度,而是希望图片占用空间可以小一些。...那么只要将图片的长宽缩小即可,几乎所有的图片处理软件都支持这个功能。不过如果有许多张图片需要压缩,一张张手动处理实在是太低效。...虽然很多软件也提供了批量处理的功能,不过我们是编程教室啊,所以我们偏要用 Python 代码来解决这个问题…… 那么今天的任务就是:用一段代码来压缩图片大小。提示,可以使用 Pillow 库来解决。...实现单张图片的压缩不难,所以附加题,将这段代码制作成一个命令行工具,使其可以: 指定要压缩的图片文件 如果指定的是一个目录,则压缩整个目录里的图片 指定压缩的比率 指定输出的文件路径 选择是否保留原始图片

    1.1K70

    一起学习PHP中GD库的使用(三)

    生成指定大小的等比例缩略图 还有一种业务情况是,我们前台的图片展示大小都是一样的,比如商品图片在列表中的显示。...这时,很多图片直接压缩可能就会丢失比例,比如我们上传了一张 16:9 的大宽图,而前台列表页的图片位置是 4:3 的图,这里我们就要等比例按照最大宽度或者最大高度进行缩小,同时多出来的部分留白边或者透明边...而需要操作的图片则是 300*244 的一张不太规范的图片。这时,我们通过计算 宽/高 的比例,来确定是以宽为基准进行缩小还是以高为基准进行缩小。...如果原图的宽高比大于我们规定的图片宽高比,则认为是以宽度为基准进行缩小。反之,就是以高度进行缩小。同样地,具体的宽高结果的算法都都是基于对应的比率进行等比例缩小的。...可以看到,我们等比例缩放之后是以原图的高为基准进行缩放的,所以图片的两边会出现白边。如果是以宽为基准的,那么图片上下会出现白边。当然,如果原图的比例和我们需要的比例是一样的,就会完整地撑满整个画布。

    81510
    领券