首页 > 其他分享 >CSS 3.0中裁剪图像的特效

CSS 3.0中裁剪图像的特效

时间:2023-02-09 12:33:27浏览次数:50  
标签:object 裁剪 height width 3.0 CSS


在有CSS 3.0之前裁剪图片实现也是颇有难度的,现在我们有了两个非常方便简单的属性可以实现裁剪,那就是object-fit 和obectj-position,这两个属性可以让我们改变图片的大小,但是不影响图片的长宽比,利用它我们可以实现一个如下的特效。

CSS 3.0中裁剪图像的特效_前端开发

以下是代码实现,欢迎大家复制粘贴和收藏。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 3.0中裁剪图像的特效</title>
<style>
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #000;
margin-top:50px;
}
input {
transform: scale(1.5);
margin: 10px 5px;
color: #fff;
}

input:checked+br+img {
width: 480px;
height: 270px;
object-fit: cover;
object-position: left-top;
transition: width 2s, height 4s;
}

img {
width: 960px;
height: 540px;
transition: 0s;
}

</style>
</head>

<body>
<main>
勾选裁剪图片 <input type="checkbox" />
<br />
<img src="/i/ll/?i=2020032122230564.png"/>
</main>
</body>

</html>

标签:object,裁剪,height,width,3.0,CSS
From: https://blog.51cto.com/u_15959833/6046803

相关文章

  • CSS 3.0中伪元素after和before的妙用
    我们常用CSS3.0中的伪元素来修饰一些细节,让页面看起来效果更好,比如下面这个图片中的面包屑导航中的符号,还有任务清单前的序列符号,都是用伪元素实现的。 以下是代码实现,希......
  • CSS 3.0中图片颜色过滤特效
    给大家分享一个用CSS3.0写的图片颜色过滤的特效,效果如下:以下是代码实现,欢迎大家复制粘贴和收藏。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><m......
  • CSS 3.0的过滤属性实现黑暗模式
    现在很多的网站都喜欢采用黑暗模式,毕竟这种界面看起来逼格比较高端,比如下面这样的效果:你可能会认为这是不是需要写两套样式,其实不用,用一个属性就可以变成黑暗模式,以下是代码......
  • PL/SQL package SYS.DBMS_RCVMAN version 19.03.00.00 is too old
    现象PL/SQLpackageSYS.DBMS_BACKUP_RESTOREversionisnotcurrentPL/SQLpackageSYS.DBMS_RCVMANversion19.03.00.00istooold#登陆RMAN如下提示Copyright......
  • P23:React高级-CSS3实现react显示隐藏
    React16基础​​阐述​​​​新建一个Boss组件​​​​编写业务逻辑​​​​加入CSS动画​​​​Demo​​​​index.js​​​​exp.css​​​​Example.js​​​​Boss.js......
  • Webpack实现将CSS中的px转换为rem
    由于现在众多移动设备的兴起,各种手机厂商推出了许多不同屏幕尺寸大小的手机型号,前端人员在编写代码时就需要适配各种手机屏幕。传统的样式适配是利用CSS的媒体查询,但是这种......
  • Webpack中给CSS自动添加前辍
    由于现在主流的浏览器有好几种,在编写CSS样式时,需要对各种浏览器作兼容处理,导致在写一些新的CSS样式时需要针对不同的浏览器加上不同的前辍,如果每个前辍都手动来加的话会相当......
  • JavaScript插件 图片裁剪photoClip
    阅读目录​​JavaScript插件图片裁剪photoClip​​​​1、截图​​​​2、代码​​​​后台接收并处理图片代码​​JavaScript插件图片裁剪photoClip页面裁剪图片得到bas......
  • css基础 语法和选择器
    阅读目录CSS实例查看css是如何工作的CSS语法CSS选择器CSS元素选择器CSSid选择器CSS类选择器CSS通用选择器CSS分组选择器CSS实例查看css是如何......
  • Css & JavaScript & jquery 实现选项卡的制作
    阅读目录Css源码源码解析JavaScript源码JavaScript源码解析jQuery源码jQuery源码解析Css源码<!DOCTYPEhtml><htmllang="en"><style></style>......