首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

巧用css实现等比缩放裁切

实用场景 我们想要将后台传过来的图片显示在一个80*80 的容器里 但是由于后台给的图片大小不一致 所以我们要对图片做一个等比缩放然后裁切中间部分显示的处理。...举个栗子 图一: 600*370 规则是以图片短的一边缩小到80的比例,缩短长的一边 以上图为例,由于宽比较短,为370 那我们就会以370/80 的比例,缩放这个图 最后就会变成 130*80 如图二...接着,我们截取中间的80*80展示在页面中 如下图 代码实现 下面我们来解释如何做到这个效果,其实很简单~ 1.先设置好一个80 *80 的容器 container,把背景图引进来 2.按照短边的比例缩放...最终实现的代码如下: 但是这里有个问题,我们并不想判断宽高还是长高来改background-size,这时候css3的background-size:cover 就可以帮我们解决这个问题,它会自动根据短的一边为比例缩放图片

1.3K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    巧用css实现等比缩放裁切

    实用场景 我们想要将后台传过来的图片显示在一个80*80 的容器里,但是由于后台给的图片大小不一致,所以我们要对图片做一个等比缩放然后裁切中间部分显示的处理。...以上图为例,由于宽比较短,为370,那我们就会以370/80 的比例,缩放这个图,最后就会变成 130*80,如图二。...80*80展示在页面中,效果如图三所示: 图三: 代码实现 下面我们来解释如何做到这个效果,其实很简单~ 1.先设置好一个80 *80 的容器 container,把背景图引进来 2.按照短边的比例缩放...; } 但是这里有个问题,我们并不想判断宽高还是长高来改background-size,这时候css3的background-size:cover 就可以帮我们解决这个问题,它会自动根据短的一边为比例缩放图片

    2.2K60

    巧用css实现等比缩放裁切

    IMWeb 黄qiong 原文出处:IMWeb社区 未经同意,禁止转载 实用场景 我们想要将后台传过来的图片显示在一个80*80 的容器里,但是由于后台给的图片大小不一致,所以我们要对图片做一个等比缩放然后裁切中间部分显示的处理...以上图为例,由于宽比较短,为370,那我们就会以370/80 的比例,缩放这个图,最后就会变成 130*80,如图二。 图二:130*80 ?...代码实现 下面我们来解释如何做到这个效果,其实很简单~ 1.先设置好一个80 *80 的容器 container,把背景图引进来 2.按照短边的比例缩放,这里我们的图片是高比较短,所以通过设置 background-size...; } 但是这里有个问题,我们并不想判断宽高还是长高来改background-size,这时候css3的background-size:cover 就可以帮我们解决这个问题,它会自动根据短的一边为比例缩放图片

    92520

    图片上传前预处理,等比缩放、裁剪 (html5 + canvas)

    源码地址:https://github.com/capricorncd/image-process-tools 解决图片上传前缩放到一定比例自动居中裁剪、等比缩放等。...后期版本应该会加入手动设置裁剪位置及缩放比例。 处理完成后,将返回处理完成的数据,及原图片文件的大小、宽度、高度和Base64数据。...(即一边等于设置值,另一边超出设置值部分裁去),居中裁剪 width: 640 裁剪或缩放宽度为640px(可选) 不配置crop,或crop为false时,则为缩放尺寸。...1.限制宽度缩放,则只需设置width值。 2.限制高度缩放,则只需设置height值。...3.若crop为false,同时设置了width/height值,则只按width缩放,忽略height height: 640 裁剪或缩放高度为640px(可选) type: jpg 上传图片目标格式

    2.1K20

    dotnet C# 图片等比限制最大和最小大小缩放算法

    本文只是告诉大家如何计算缩放之后的宽度和高度,不包含实际的图片缩放方法 如下图,我要将图片的大小进行等比缩放,此时我要求图片的宽度和高度大于最小尺寸,但是要求宽度和高度都不大于最大尺寸,如果这两个规则冲突...原因是等比缩放对于长图计算不友好,如果我有一张图片的宽度和高度比例是 1:1000 那么此时如果没有限制最大高度,那么将宽度缩放到最小宽度需要缩放10倍,此时的高度就太大了 下面就是计算方法 先定义大小这个类...static Size OptimizationSize(Size currentSize, Size minSize, Size maxSize) 计算的方法就是先获取宽度和高度的缩放到最小大小的缩放值...,同时拿到最大缩放里面的最小的一个,这样缩放完成之后就不会大于最大的宽度和高度 var maxWidthScale = maxSize.Width / width;...scale = Math.Ceiling(scale); 所有代码 /// /// 宽度和高度不小于最小大小,但是不大于最大大小,缩放使用等比缩放

    1.9K30

    html中img图片进行等比缩放的实例代码

    img图片等比缩放的方法HTML中,要修改img元素定义的图片的大小,且是等比缩放,不改变宽和高的比值,那么可以采用只设置img元素属性中width和height中的任何一个,不要同时设置两个即可实现...img图片的等比缩放效果。...width等比缩放img图片实例代码,及在线编辑器为了可以与原图片的大小进行对照,下面的实例使用HTML的注释符号将等比缩放的代码进行了注释,第一遍运行完之后,可以将第一行的代码删除(在线删除,因为这是一个在线编辑器...等比缩放的另外一种方法当然了,如果要通过同时设置img图片的width和height两个属性来达到等比缩放图片的话也是可以的,但是要先计算一下图片的宽度和高度的比例,之后再等比缩放。...原文:html img图片等比缩放的代码免责声明:内容仅供参考,不保证正确性!

    2K21
    领券