grid弹性布局 设置宽高一致

效果图如下：
在这里插入图片描述
例子：设置每行四列的弹性布局，每个盒子宽高相同，间距为10px

.left_list{display: grid;grid-gap: 10px 10px;grid-template-columns: repeat(4,1fr);.list_item{height: 0;padding-bottom:100%;/*高度设置为0，使用内间距100%，将匡高设置为一致*/position: relative;}img{width: 100%;height: 100%;position: absolute;object-fit: cover;/*预览图片的缩略图最好基于正中心显示*/}}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

io和进程day03（文件IO、文件属性函数、目录相关函数）

io和进程day03（文件IO、文件属性函数、目录相关函数）

今日任务 代码 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <sys/types.h> #include <sys/stat.h> #include <unistd.h> #include <sys/types.h> #include <pwd.h> #include <dirent.h> #in…
阅读更多...
【图文并茂】C++介绍之串

【图文并茂】C++介绍之串

1.1串 引子—— ​ 字符串简称为串&#xff0c;串是由字符元素构成的&#xff0c;其中元素的逻辑关系也是一种线性关系。串的处理在计算机非数值处理中占用重要的地位&#xff0c;如信息检索系统&#xff0c;文字编辑等都是以串数据作为处理对象 串是由零个或多个字符组成的…
阅读更多...
得心应手应对 OOM 的疑难杂症

得心应手应对 OOM 的疑难杂症

Java全能学习面试指南&#xff1a;https://www.javaxiaobear.cn/ 前面我们提到&#xff0c;类的初始化发生在类加载阶段&#xff0c;那对象都有哪些创建方式呢&#xff1f;除了我们常用的 new&#xff0c;还有下面这些方式&#xff1a; 使用 Class 的 newInstance 方法。使用…
阅读更多...
[Vue3 博物馆管理系统] 使用Vue3、Element-plus的Layout 布局构建组图文章

[Vue3 博物馆管理系统] 使用Vue3、Element-plus的Layout 布局构建组图文章

系列文章目录 第一章 定制上中下&#xff08;顶部菜单、底部区域、中间主区域显示&#xff09;三层结构首页 第二章 使用Vue3、Element-plus菜单组件构建菜单 第三章 使用Vue3、Element-plus走马灯组件构建轮播图 第四章 使用Vue3、Element-plus tabs组件构建选项卡功能 第五章…
阅读更多...
PHP反序列化漏洞

PHP反序列化漏洞

一、序列化&#xff0c;反序列化 序列化&#xff1a;将php对象压缩并按照一定格式转换成字符串过程反序列化&#xff1a;从字符串转换回php对象的过程目的&#xff1a;为了方便php对象的传输和存储 seriallize() 传入参数为php对象&#xff0c;序列化成字符串 unseriali…
阅读更多...
go gin gorm连接postgres postgis输出geojson

go gin gorm连接postgres postgis输出geojson

go gin gorm连接postgres postgis输出geojson 1. 技术环境 go-gin-gorm postgres-postgis go vscode环境安装-智能提示配置 2. 简单实现代码 思路就是&#xff1a;采用原生sql实现查询、更新等&#xff0c;采用gorm的raw来执行sql语句 package mainimport ("fmt"&q…
阅读更多...
nginx解决静态页面中ajax跨域方案配置

nginx解决静态页面中ajax跨域方案配置

nginx 配置内容 &#xff1a; server { listen 9999;#监听端口 server_name localhost;#域名 add_header Access-Control-Allow-Origin *; # 允许跨域 #charset koi8-r; #access_log logs/host.access.log main; location / { …
阅读更多...
python面向对象的一个简单实例

python面向对象的一个简单实例

#发文福利# #!/usr/bin/env python # -*- coding:utf-8 -*-students {id001: {name: serena, age: 18, address: beijing},id002: {name: fanbingbing, age: 42, address: anhui},id003: {name: kahn, age: 20, address: shanghai}}class Student:def __init__(self, xid, na…
阅读更多...
采访 Footprint Analytics CEO Navy：AI 与 Web3 的融合之道

采访 Footprint Analytics CEO Navy：AI 与 Web3 的融合之道

Web3 正在引领互联网的下一个时代。然而&#xff0c;链上数据碎片化、不标准化的问题依然存在。Footprint Analytics 推出一站式数据解决方案&#xff0c;通过 AI 技术实现区块链数据的自动收集、清洗、关联&#xff0c;构建跨链数据标准&#xff0c;让开发者更便捷地访问和分析…
阅读更多...
JavaScript 之 Symbol 数据类型

JavaScript 之 Symbol 数据类型

一、简介 ​ symbol类型是ES6新引入的一种基本数据类型&#xff0c;该类型具有静态属性和静态方法。其中静态属性暴露了几个内建的成员对象&#xff0c;静态方法暴露了全局的symbol注册。 ​ symbol类型具有以下特点&#xff1a;① 唯一性&#xff1a;每个symbol值都是唯一的…
阅读更多...
JavaScript设计模式（四）——策略模式、代理模式、观察者模式

JavaScript设计模式（四）——策略模式、代理模式、观察者模式

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…
阅读更多...
【MySQL基础】事务隔离03

【MySQL基础】事务隔离03

目录 隔离性与隔离级别事务隔离的实现事务的启动方式MySQL事务代码示例 在MySQL中&#xff0c;事务支持是在引擎层实现的。MySQL是一个支持多引擎的系统&#xff0c;但并不是所有的引擎都支持事务。比如 MySQL 原生的 MyISAM 引擎就不支持事务&#xff0c;这也是 MyISAM 被 Inn…
阅读更多...
uniapp的两个跳转方式

uniapp的两个跳转方式

uniapp内置多种跳转方式&#xff0c;我这里介绍两个最常用的跳转&#xff0c;uni.navigateTo和uni.switchTab&#xff0c;前者为跳转到非TabBar页面&#xff0c;后者为跳转到TabBar页面&#xff0c;所谓TabBar就是底部导航栏配置的页面&#xff0c;例如下方的index.vue。 在pa…
阅读更多...
29 | 聊聊性能测试的基本方法与应用领域

29 | 聊聊性能测试的基本方法与应用领域

并发用户数、响应时间、系统吞吐量之间的关系 当系统并发用户数较少时&#xff0c;系统的吞吐量也低&#xff0c;系统处于空闲状态&#xff0c;这个阶段被称为 “空闲区间”。 并发用户数进一步增长&#xff0c;系统的处理能力逐渐趋于饱和&#xff0c;因此每个用户的响应时间会…
阅读更多...
Java 日志技术

Java 日志技术

所以说&#xff0c;要学Logback&#xff01; 配置文件 Logback提供了一个核心配置文件logback.xml&#xff0c;日志框架在记录日志时会读取配置文件中的配置信息&#xff0c;从而记录日志的形式。 可以配置日志输出的位置是文件还是控制台可以配置日志输出的格式还可以配置日…
阅读更多...
55、基于 WebFlux 开发 WebSocKet

55、基于 WebFlux 开发 WebSocKet

★ 基于Web Flux开发WebSocket 两步&#xff1a; &#xff08;1&#xff09;实现WebSocketHandler开发WebSocket处理类。 实现该接口时只需要实现Mono handle(WebSocketSession webSocketSession)方法即可。 &#xff08;2&#xff09;使用HandlerMapping和WebSocketHandler…
阅读更多...
【Arduino27】DHT11温湿度传感器模拟值实验

【Arduino27】DHT11温湿度传感器模拟值实验

硬件准备 DHT11温湿度&#xff1a;1个 面包板&#xff1a;1个 杜邦线&#xff1a;3根 硬件连线 VDD引脚接 5V 电源 DATE引脚接 4号 接口 GND引脚接 GND 接口 软件程序 #include<DHT.h>#define DHT11_pin 4 //温湿度传感器引脚DHT dht(DHT11_pin,DHT11);float tem…
阅读更多...
vue学习记录

vue学习记录

正要学习&#xff0c;先记录一下学习资料&#xff0c;备忘 1、Vue3安装配置、开发环境搭建(组件安装卸载)&#xff08;图文详细&#xff09; Vue3安装配置、开发环境搭建(组件安装卸载)&#xff08;图文详细&#xff09;_逆境清醒的博客-CSDN博客 2、vue3 项目搭建教程&#…
阅读更多...
常用echart图总结

常用echart图总结

柱状图 - category-work,grid直角坐标,legend,series-bar柱状图,tooltip提示框 - makeapie echarts社区图表可视化案例
阅读更多...
华为OD机试 - 最多颜色的车辆 - 数据结构map（Java 2022Q4 100分）

华为OD机试 - 最多颜色的车辆 - 数据结构map（Java 2022Q4 100分）

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路1、核心思想2、题做多了&#xff0c;你就会发现&#xff0c;这道题属于送分题&#xff0c;为什么这样说&#xff1f;3、具体解题思路&#xff1a; 五、Java算法源码六、效果展示1、输入2、输出 华为OD机试 2023B…
阅读更多...
最新文章

Copyright @ 2022~2023