前端居中截取不同形状的图片

news2024/12/25 14:03:54

开发的时候拿到这样一个需求:
在这里插入图片描述
意思就是要居中截取图片,这个功能跟微信朋友圈的九宫格显示功能差不多的效果。

方案一

用样式居中,这种方案适合紧急情况下的临时方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     .bg{
     
        display: flex;
    }
    .bg1{
     
        width: 400px;
        height: 700px;
        margin-left: 10px;
        background: url(换成图片地址)   no-repeat  ;
        background-size: cover;

    }
    .bg2{
     
        width: 300px;
        height: 300px;
        margin-left: 10px;
        background:url(换成图片地址) center center no-repeat;
        background-size: cover;
    }
</style>
<body >
    <div class="bg">
        <div class="bg1">
          
        </div

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/987790.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

华为云云耀云服务器L实例评测|基于华为云云耀云服务器L实例搭建MySQL集群并开展性能评测

文章目录 华为云云耀云服务器L实例的使用搭建MySQL集群环境搭建安装MySQL数据库 集群搭建安装Galera Cluster配置MySQL启动集群 性能测试安装sysbench创建测试数据库运行性能测试 使用Superset从MySQL数据源中获取数据进行分析准备工作配置MySQL数据源从MySQL数据源中获取数据 …

基于Java+SpringBoot+Vue前后端分离的房屋租赁管理系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 房屋租赁管理系统是一…

029:vue项目,勾选后今天不再弹窗提示

第029个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

【校招VIP】前端算法考察之字符串

考点介绍 说到字符串算法我们最先想到的就是模式匹配问题&#xff0c;所谓模式匹配就是字符串匹配问题&#xff0c;就是在一个长的主串中寻找子串的过程&#xff0c;如果我们直接暴力匹配那就是最基本的BF算法&#xff1b;KMP算法与BF算法最大的区别区别就是主串不进行回溯。 …

PaddleOCR学习笔记1-初步尝试

尝试使用PaddleOCR方法&#xff0c;如何使用自定义的模型方法&#xff0c;参数怎么配置&#xff0c;图片识别尝试简单提高识别率方法。 目前仅仅只是初步学习下如何使用PaddleOCR的方法。 一&#xff0c;测试识别图片&#xff1a; 1.png : 正确文本内容为“哲学可以帮助辩别现…

向左偏移的云应用容器监控方法

向左偏移是一种在软件开发生命周期的早期强调测试、监控和自动化的软件开发和操作方法。向左偏移方法的目标是通过尽早发现问题并迅速解决&#xff0c;从而预防问题的发生。 当您尽早发现可扩展性问题或错误时&#xff0c;解决它将更加迅速和经济高效。将低效的代码移动到云容…

使用Jsmooth打包JavaFx程序为EXE文件

配置IDEA 第一步&#xff1a; 第二步&#xff1a; MANIFEST.MF的文件路径&#xff0c;必须在resources文件夹中&#xff0c;如果没有&#xff0c;就创建一个。 第三步&#xff1a;配置项目所需jar包的相对路径 最后&#xff1a; 点击确定后&#xff0c;编译Jar 配置Jsmooth …

Docker从认识到实践再到底层原理(四-1)|Docker镜像仓库|超详细详解

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…

k8s node环境部署(三)

1、添加node1、node2环境 前面配置master环境的截图最后一段 复制下来 分别在node主机执行 kubeadm join 192.168.37.132:6443 --token p5omh3.cqjqt8ymrwkdn2fc \ --discovery-token-ca-cert-hash sha256:608a1cbadd060cfdeac2fae84c19609061b750ab51bf9a19887ff7ea…

恒运资本:消费电子概念再爆发,冠石科技三连板,捷荣技术9日大涨127%

消费电子概念8日盘中再度走高&#xff0c;截至发稿&#xff0c;利和兴涨近15%&#xff0c;日久光电、冠石科技、捷荣技能、华映科技、东睦股份等涨停&#xff0c;大富科技涨超7%。 值得注意的是&#xff0c;冠石科技已接连3日涨停&#xff0c;公司昨日晚间发布危险提示称&…

数字钥匙关键技术:UWB(超宽带)实现原理一文讲透

在之前的文章《一文讲透超宽带&#xff08;UWB&#xff09;前世今生》中&#xff0c;我们从起源、定义、标准、发展、应用等角度概述了UWB技术。根据UWB的特性&#xff0c;其基础功能分为&#xff1a;数据传输、雷达成像、测距定位。接下来我们将概述其数据传输和雷达成像功能&…

YOLOV7改进-对小目标有效的BiFormer注意力机制

如果要在sppcspc后面加一个注意力模块BiFormer 1、 普通加 1、models-common.py搜这个模块 2、直接加 3、全部复制下来&#xff0c;models新建文件 4、common导入进来 5、填上一层的输出通道数 2、模块里加 难点&#xff1a;在配置文件找到对应的这一块 yolov7x中 1、…

GE IS220PDIAH1A 336A4940CSP1 控制主板模块

GE IS220PDIAH1A 336A4940CSP1 是一款控制主板模块&#xff0c;通常用于工业自动化和控制系统中。以下是可能与这种控制主板模块相关的一些产品功能&#xff1a; 信号处理&#xff1a; GE IS220PDIAH1A 336A4940CSP1控制主板模块通常负责信号处理&#xff0c;可以接收、放大、滤…

机器学习算法基础--线性回归算法

目录 1.算法求解步骤 2.算法核心代码 3.算法效果展示 1.算法求解步骤 线性回归算法流程: #1.数据导入与处理 #2.创建线性回归模型并拟合数据 #3.计算回归直线的斜率和截距 #4.预测 x5 时的y值 #5.进行进一步预测 #5.进行进一步预测 2.算法核心代码 #机器学习算法基础第一…

数据结构与算法:练习与实践的重要性

文章目录 为什么练习与实践很重要&#xff1f;1. 熟练应用2. 问题解决能力3. 代码效率4. 面试准备 如何练习与实践&#xff1f;1. 在线评测平台2. 自主设计数据结构3. 解决不同类型的问题 持续学习与实践 &#x1f389;欢迎来到数据结构学习专栏~数据结构与算法&#xff1a;练习…

MySQL使用CASE WHEN统计SQL语句代替子查询SQL统计,CASE WHEN常用写法,根据不同的条件对数据进行分类、分组和聚合

MySQL中&#xff0c;写一个CASE WHEN的统计SQL语句&#xff0c;代替子查询SQL统计语句 假设我们有一个名为"orders"的表&#xff0c;其中包含订单信息&#xff0c;包括订单号(order_id)、订单金额(order_amount)等列。我们想要统计每个订单级别的订单数量&#xff0c…

深度学习:基于循环神经网络RNN实现自然语言生成

目录 1 循环神经网络介绍 1.1 什么是循环神经网络 1.2 RNN的网络结构 1.3 RNN的工作原理 ​编辑 1.4 RNN的应用场景 2 基于RNN实现语句生成 2.1 句子生成介绍 2.2 基于pytorch实现语句生成 2.3 完整代码 2.4 该模型的局限 3 总结 1 循环神经网络介绍 1.1 什么是循环…

Anaconda - 操作系统安装程序 简要介绍

Anaconda 简要介绍 1. Anaconda 简介2. Anaconda 体系结构3. Anaconda 开发模型4. Anaconda 启动概述5. Anaconda 源码1. 接口2. 自定义组件3. 硬盘分区&#xff1a;使用python-blivet包4. Bootloader5. 各个步骤的配置&#xff1a;6. 安装软件包&#xff1a;7. 安装控制&#…

华为强势回归,苹果iPhone15ProMax独占潜望式镜头,预计销量受损

9月8日消息&#xff0c;据集邦咨询发布的产业洞察报告显示&#xff0c;苹果即将发布的iPhone 15 Pro Max将会独占潜望式镜头&#xff0c;该机型的占比预计将会达到40%左右。报告同时预估&#xff0c;今年iPhone 15系列手机的出货量将达到8000万&#xff0c;相比去年同期增长6%以…

无需公网IP教你如何外网远程访问管家婆ERP进销存

文章目录 前言 1.管家婆服务2. 内网穿透2.1 安装cpolar内网穿透2.2 设置远程访问 3. 固定访问地址4. 配置固定公网访问地址 前言 管家婆辉煌系列产品是中小企业进销存、财务管理一体化的典范软件&#xff0c;历经十余年市场的洗礼&#xff0c;深受广大中小企业的欢迎&#xff…