两种方式实现图片按比例响应式缩放、并自动裁剪的css技巧

骑猪看日落 2022-06-04 05:08 273阅读 0赞

两种方式各有各的优势和短板：

一：也是大家最经常用的，如下：

<div style="width: 4.0rem;background: red;">  
        <img data-echo="assets/img/bmw\_m1\_hood.jpg" src="assets/img/grey.gif" alt="" style="width: 100%;">  
</div>

这种方式优势在于：

1，可以结合flexble等手机适配框架实现手机端的适配  （width: 4.0rem;）

2，可以结合echo.js或者lazyload.js等懒加载插件

备注：懒加载时style="width: 100%;"是必须要设置的

这种方式短板也很明显：

1，高度是自适应宽度的变化的，所以不能实现等比例裁剪，比如1:1；2:3。。。。

2，如果很多同类图片同时使用，需要美工做同样尺寸的图片

二：利用css的background：url()属性，如下：

html部分：

<div style="width: 4.0rem;background: red;">  
        <div class="zsimage"></div>  
   </div>

css部分：

.zsimage\{  
  background: url(../../../assets/img/bmw\_m1\_hood.jpg);  
  width: 100%;  
  height: 0;  
  padding-bottom: 100%;  
  overflow: hidden;  
  background-position: center center;  
  background-repeat: no-repeat;  
  -webkit-background-size:cover;  
  -moz-background-size:cover;  
  background-size: cover;  
\}

备注：设置比例时直接对 width: 100%;和padding-bottom: 100%;进行设置就好，比如目前都是100%也就是1:1

如果设置为width: 100%;padding-bottom: 50%;就是2:1

这种方式的优势在于：

1，可以在不拉伸图片的情况下，按比例裁剪图片

2，无论什么尺寸的图，不需要美工处理，可实现自行裁剪

短板也很明显：

1，不能做懒加载处理

发表评论取消回复

表情：

评论列表（有 0 条评论，273人围观）

还没有评论，来说两句吧...

相关阅读

相关裁剪、缩放图片工具类

import javax.imageio.ImageIO; import java.awt.*; import java.awt.geom.Affi...

冷不防/ 2024年04月17日 05:26/ 0 赞/ 188 阅读

相关 js等比例缩放图片

有时网页很容易被大图片撑开，下面的js小技巧可以用来解决这个问题。 js获得图片大小和容器的大小进行比较然后重新设置图片的显示大小，示例如下： Code:

旧城等待，/ 2024年02月17日 20:16/ 0 赞/ 173 阅读

相关 Android ConstraintLayout按比例缩放View

Android ConstraintLayout按比例缩放View 关键点有两个，第一，使用Android ConstraintLayout的layout\_con

向右看齐/ 2023年10月17日 19:08/ 0 赞/ 122 阅读

相关安卓实现图片缩放、压缩、裁剪

安卓实现图片缩放、压缩、裁剪 1、缩放 2、压缩 3、裁剪 4、项目中开始的时候：Bitmap是个什么东西？后面：真香！ 1、缩放

Dear 丶/ 2023年07月13日 13:46/ 0 赞/ 135 阅读

相关 php等比例缩放图片

/ 处理图片尺寸【等比例缩小或放大】 @param $filePath【进行处理图片本地地址】 @param $saveImage【处理后保存地址】 @para

秒速五厘米/ 2022年11月26日 15:52/ 0 赞/ 363 阅读

相关 CSS控制图片等比例缩放

图片最大宽度为1000px 超过1000px自动等比例缩放至1000px .imgs { max-width: 1000px;//非I

你的名字/ 2022年07月12日 01:15/ 0 赞/ 352 阅读

相关两种方式实现图片按比例响应式缩放、并自动裁剪的css技巧

两种方式各有各的优势和短板：一：也是大家最经常用的，如下： <div style="width: 4.0rem;background: red;">

骑猪看日落/ 2022年06月04日 05:08/ 0 赞/ 274 阅读

相关 CSS控制图片等比例缩放

img{ width: auto; height: auto; max-width: 100%;

亦凉/ 2022年05月21日 01:54/ 0 赞/ 400 阅读

相关 Thumbnailator图片处理(图片缩放，区域裁剪，水印，旋转，保持比例)

Thumbnailator 是一个优秀的图片处理的Google开源Java类库。处理效果远比Java API的好。从API提供现有的图像文件和图像对象的类中简化了处理过程，两三

梦里梦外;/ 2022年05月09日 14:06/ 0 赞/ 576 阅读

相关 CSS如何实现图片等比例缩放不变形（代码实例）

工作中经常需要对图片进行缩放，但有些缩放会让图片变形，所以今天就给大家介绍**CSS如何实现图片等比例缩放不变形，**正在学习CSS的小伙伴赶紧过来看看吧！ [...

朱雀/ 2021年01月29日 18:06/ 0 赞/ 844 阅读