【css】html里面的图片宽度设为百分比,高度要与宽度一样

场景:展示图片列表的时候,原始图片宽高不一致。

外层div的宽度自适应,图片宽度不能固定数值,只能设置百分比。图片高度也不能设置固定数值。 如何让图片的高度与图片的宽度一样呢?

html代码 : 

<div class="box"><div class="father-img"><img src="img.png" alt="商品详情"></div><div class="desc-info">¥100</div>
</div>

css代码: 

.box{width:calc((100% - 64px) / 4); /* 最外层div宽度自适应 */
}.father-img {position: relative;width: 100%; /* 容器宽度 */height: 0; /* 容器高度 */padding-bottom: 100%; /* 这里的百分比值应与图像宽度相同 */
}
.father-img img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;/*object-fit属性:可设置为cover、contain等,和background-size是一样的值。*/object-position: center;/*object-position属性:可设置为center、left等,和background-position是一样的值。*/
}

最终效果图: 

 

img标签实现background-size:cover(图片拉伸、缩放)等效果

object-fit: cover;/*可设置为cover、contain等,和background-size是一样的值*/
object-position: center;/*可设置为center、left等,和background-position是一样的值*/

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

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

相关文章

c#使用COM接口设置excel单元格宽高匹配图片,如何计算?

c#使用COM接口设置excel单元格宽高如何换算 在实际工作中&#xff0c;经常需要在excel中插入图片。并设置单元格与图片对齐。但是excel单元格的宽度和高度使用不同的单位。单元格的宽度以字符宽度为单位&#xff0c;而高度以点为单位。如果按照实际值来设置&#xff0c;例如设…

RHCE web解析、dns配置、firewalld配置实验

RHCE web解析、dns配置、firewalld配置实验 实验一1.清理软件包2.安装软件包3.配置web服务查看默认测试页面报错讲解12 4.安装DNS解析需要的bind软件包5.修改网络配置&#xff0c;查错&#xff0c;修改权限 实验二配置文件haha.confnamed.confnamed.haha 实验一 1、学习方法 重…

JavaEE进阶----SpringMVC(三)---响应的获取

文章目录 1.cookie和session获取1.1servlet写法获取1.2spring获取cookie1.3传统方法获取session1.4sring获取session内容 2.访问静态页面3.一个项目部署多个服务4.responsebody的介绍5.返回html的片段6.不同相应content-type类型6.1text/html类型6.2application-json类型6.3 js…

Chromium 中MemoryMappedFile使用例子c++

文件映射基础介绍参考微软官网&#xff1a; 使用文件映射 - Win32 apps | Microsoft Learn 在文件中创建视图 - Win32 apps | Microsoft Learn 创建命名的共享内存 - Win32 apps | Microsoft Learn 使用大页面创建文件映射 - Win32 apps | Microsoft Learn 从文件句柄获取…

OpenHarmony4.1蓝牙芯片如何适配?触觉智能RK3568主板SBC3568演示

当打开蓝牙后没有反应时&#xff0c;需要排查蓝牙节点是否对应、固件是否加载成功&#xff0c;本文介绍开源鸿蒙OpenHarmony4.1系统下适配蓝牙的方法&#xff0c;触觉智能SBC3568主板演示 修改对应节点 开发板蓝牙硬件连接为UART1&#xff0c;修改对应的节点&#xff0c;路径为…

前端 JS面向对象 原型 prototype

目录 一、问题引出 二、prototype原型对象 三、小结 四、constructor 五、__proto__对象原型 六、原型链 一、问题引出 由于JS的构造函数存在内存浪费问题&#xff1a; function Star(name,age){this.namenamethis.ageagethis.singfunction () {console.log("唱歌&…

生成 Django 中文文档 PDF 版

文章目录 背景克隆 Django 文档和翻译仓库配置 conf.py设置和同步翻译生成 .pot 文件运行 sphinx-intl update复制翻译文件 构建 PDF生成 tex 文件安装 MikTeX生成 PDF Sphinx 生成文档 背景 浏览看到一个帖子&#xff0c;有个评论说可以用 sphinx 构建一个 pdf&#xff0c;正…

mysql 实现分库分表之 --- 基于 MyCAT 的分片策略详解

引言 在我们日常工作的项目中&#xff0c;特别是面向 C 端用户的产品&#xff0c;随着业务量的逐步扩大&#xff0c;数据量也呈指数级增长。为了应对日益增长的数据库压力&#xff0c;数据库优化已成为项目中不可或缺的一环&#xff0c;而分库分表则是海量数据优化方案中的重要…

JUC-locks锁

JUC-locks锁 1、JUC-locks锁概述2、管程模型3、ReentrantLock可重入锁3.1 ReentrantLock源码3.2 Sync静态内部类3.3 NonfairSync非公平锁3.4 FairSync公平锁 如有侵权&#xff0c;请联系&#xff5e; 如有错误&#xff0c;也欢迎批评指正&#xff5e; 1、JUC-locks锁概述 java…

GEE 数据集——美国gNATSGO(网格化国家土壤调查地理数据库)完整覆盖了美国所有地区和岛屿领土的最佳可用土壤信息

目录 简介 代码 引用 网址推荐 知识星球 机器学习 gNATSGO&#xff08;网格化国家土壤调查地理数据库&#xff09; 简介 gNATSGO&#xff08;网格化国家土壤调查地理数据库&#xff09;数据库是一个综合数据库&#xff0c;完整覆盖了美国所有地区和岛屿领土的最佳可用土…

kettle开发-Day43-数据对比

前言&#xff1a; 随着数字化的深入&#xff0c;各种系统及烟囱的建立&#xff0c;各系统之间的架构和数据存储方式不同&#xff0c;导致做数据仓库或数据湖时发现&#xff0c;因自建的系统或者非标准化的系统经常存在物理删除而不是软删除。这就延伸出一个问题&#xff0c;经常…

哪款开放式耳机好用?5款实力出众的开放式耳机按头安利!

随着耳机市场日益火爆&#xff0c;许多品牌与款式不断涌现。但是&#xff0c;不少劣质产品在核心性能上缺乏专业优化&#xff0c;且选用低质材料&#xff0c;在音质还原度和佩戴舒适性等关键方面存在明显短板&#xff0c;导致性能欠佳&#xff0c;聆听体验不佳&#xff0c;还可…

Unity资源打包Addressable资源保存在项目中

怎么打包先看“Unity资源打包Addressable AA包” 其中遗留一个问题&#xff0c;下载下来的资源被保存在C盘中了&#xff0c;可不可以保存在项目中呢&#xff1f;可以。 新建了一个项目&#xff0c;路径与“Unity资源打包Addressable AA包”都不相同了 1.创建资源缓存路径 在…

矩阵的各种计算:乘法、逆矩阵、转置、行列式等——基于Excel实现

在Excel中,可以使用内置的函数和公式来实现矩阵的各种计算。以下是具体方法: 矩阵乘法: 使用MMULT函数。如图矩阵A在单元格范围A1:B2,矩阵B在单元格范围D1:E2,结果矩阵的左上角单元格为G1:选中结果矩阵的区域(如G1:H2)。输入公式:=MMULT(A1:B2, D1:E2)。按Ctrl+Shift…

[ComfyUI]Flux:繁荣生态魔盒已开启,6款LORA已来,更有MJ6写实动漫风景艺术迪士尼全套

今天&#xff0c;我们将向您介绍一款非常实用的工具——[ComfyUI]Flux。这是一款基于Stable Diffusion的AI绘画工具&#xff0c;旨在为您提供一键式生成图像的便捷体验。无论您是AI绘画的新手还是专业人士&#xff0c;这个工具都能为您带来极大的便利。 在这个教程中&#xff…

【设计模式】关联关系与依赖关系

UML 图将事物之间的联系分为 6 种&#xff1a;关联、依赖、聚合、组合、泛化、实现 我认为关联关系和依赖关系非常不好理解。 我们看下定义&#xff1a; 关联&#xff1a;表示一种拥有的关系。具有方向性。如果一个类单方向的访问另一个类&#xff0c;称为单向关联。如果两个类…

前端Cypress自动化测试全网详解

Cypress 自动化测试详解&#xff1a;从安装到实战 Cypress 是一个强大的端到端&#xff08;End-to-End, E2E&#xff09;功能测试框架&#xff0c;基于 Node.js 构建&#xff0c;支持本地浏览器直接模拟测试&#xff0c;并具有测试录屏功能&#xff0c;极大地方便了测试失败时的…

#渗透测试#SRC漏洞挖掘#云技术基础02之容器与云

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

Android 下内联汇编,Android Studio 汇编开发

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ 内联汇编 Android 内联汇编非常适用于 ARM 架构的性能优化和底层操作&#xff0c;通常用于加密、解密、特定指令优化等领域。 1. 基础语法 内联汇编在 C/C …

深入剖析【C++继承】:单一继承与多重继承的策略与实践,解锁代码复用和多态的编程精髓,迈向高级C++编程之旅

​​​​​​​ &#x1f31f;个人主页&#xff1a;落叶 &#x1f31f;当前专栏: C专栏 目录 继承的概念及定义 继承的概念 继承定义 定义格式 继承基类成员访问⽅式的变化 继承类模板 基类和派⽣类间的转换 继承中的作⽤域 隐藏规则 成员函数的隐藏 考察继承【作⽤…