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

巧用css实现等比缩放裁切

实用场景 我们想要将后台传过来的图片显示在一个80*80 的容器里 但是由于后台给的图片大小不一致 所以我们要对图片做一个等比缩放然后裁切中间部分显示的处理。...举个栗子 图一: 600*370 规则是以图片短的一边缩小到80的比例,缩短长的一边 以上图为例,由于宽比较短,为370 那我们就会以370/80 的比例,缩放这个图 最后就会变成 130*80 如图二...,这里我们的图片是高比较短,所以通过设置 background-size: auto 80px,就可以做到;如果是宽比较短,那就设置成 background-size: 80px auto; 3.让背景图片居中...background-position: center center; 最终实现的代码如下: 但是这里有个问题,我们并不想判断宽高还是长高来改background-size,这时候css3的background-size...:cover 就可以帮我们解决这个问题,它会自动根据短的一边为比例缩放图片。

1.3K30

巧用css实现等比缩放裁切

实用场景 我们想要将后台传过来的图片显示在一个80*80 的容器里,但是由于后台给的图片大小不一致,所以我们要对图片做一个等比缩放然后裁切中间部分显示的处理。...以上图为例,由于宽比较短,为370,那我们就会以370/80 的比例,缩放这个图,最后就会变成 130*80,如图二。...,这里我们的图片是高比较短,所以通过设置 background-size: auto 80px;就可以做到,如果是宽比较短,那就设置成 background-size: 80px auto; 3.让背景图片居中...background-size: auto 80px; background-position: center center; } 但是这里有个问题,我们并不想判断宽高还是长高来改background-size,这时候css3...的background-size:cover 就可以帮我们解决这个问题,它会自动根据短的一边为比例缩放图片。

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

    巧用css实现等比缩放裁切

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

    92520

    理解CSS3中的background-size(对响应性图片等比缩放)

    今天说一说理解CSS3中的background-size(对响应性图片等比缩放)[通俗易懂],希望能够帮助大家进步!!!...理解CSS3中的background-size(对响应性图片等比缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用background-size...中的媒体查询真对不同的分辨率等比缩放不同的height(高度);今天我门重新来学习下background-size 这个具体的属性值,并且使用新的方法来解决针对响应性布局的背景图片自适应。...使用padding-top:(percentage)实现响应式背景图片 我门都知道,处理在响应性布局的时候,背景图片都是等比缩放,比如上面的使用图片的情况,使用 引入的图片的话...,那么设置她们的width属性为100%; 的话,高度就会等比缩放,这是图片,但是如果是背景图片呢?

    2.9K20

    rem在响应式布局中的应用

    关于媒体查询还有媒体查询的一些兼容性问题,网上介绍的很多 其实响应式布局中主要困扰我们的问题还是元素的等比缩放。目前的元素的等比缩放主要有以下两种解决方案。 实现等比缩放的一些方案 1....利用img元素的等比缩放特点 这种情况最为常见,只需要百分比设置img元素的宽度,img元素的高度就会随着宽度等比缩放。这也是我们在响应式界面中遇到的最主要的场景。...如果是正常的一个img元素,使用这种方式进行等比缩放自然是最优的做法,但是用这种方式做容器的背景图片就会有些问题,例如,当在不同尺寸下需要替换背景图片时,这种方式就没有通过css的中的background...设置背景图片来的灵活了。...利用padding的百分比是以父元素的宽度为基准的这个特性 这种方式也可以解决等比缩放的问题,例如我们想实现video元素的等比缩放,我们就可以这样写:  .out{    .out

    1.6K40

    必应首页平铺背景图片的实现方案

    近期某个项目中需要实现以下需求: 保持背景图片原始宽高比; 如果屏幕宽高比与背景图片宽高比不一致,则以图片中心为基点等比缩放背景图片,以适应屏幕尺寸。...以上需求的原则就是始终保持背景图片宽高比,居中等比缩放填满屏幕。 我们知道background-size: cover;是在背景图片保持原始比例的基础上,等比缩放覆盖背景区域。...但是缩放的基点是左上角(0,0),并不是居中缩放的。这样的机制下,屏幕显示的始终是背景图片的左上部分,并不能满足项目的需求。...1920×1080,css中一些宽高尺寸以及宽高限制在下一节中讲解。...响应式 我们注意到上文提到的css中有一些宽高尺寸的限制,这些数值有一部分是为了满足必应首页具体需求的,有一部分是自适应屏幕尺寸的。

    1.8K50

    CSS 背景(background)

    CSS 可以添加背景颜色和背景图片,以及来进行图片设置。...背景缩放(CSS3) 通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。...其参数设置如下: a) 可以设置长度单位(px)或百分比(设置百分比时,相对于父盒子的宽高) b) 设置为cover时,会自动调整缩放比例(等比例拉伸),保证图片始终填充满背景区域(直到宽和高都填满,可能会溢出...我们平时用的cover 最多 c) 设置为contain会自动调整缩放比例(等比例拉伸),保证图片始终完整显示在背景区域(宽或者高有一方填满就不再继续拉伸),可能有空白区域。...background-size: contain; */ /* background-size: cover; */ background-size:300px ; 只写一个参数时肯定是宽度,高度省略会等比缩放

    2.1K20
    领券