位置: IT常识 - 正文

如何让img标签在父元素中自适应宽度或者高度,按比例显示(img标签怎么写)

编辑:rootadmin
如何让img标签在父元素中自适应宽度或者高度,按比例显示 自适应宽度

推荐整理分享如何让img标签在父元素中自适应宽度或者高度,按比例显示(img标签怎么写),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:img标签怎么设置图片大小,img标签中怎么放两张图片,img标签设置图片位置,img标签导入的图片在网页效果中独占一行,img标签设置图片位置,img标签怎么设置图片大小,img标签显示图片,img标签怎么让图片居中,内容如对您有帮助,希望把文章链接给更多的朋友!

如何让img标签在父元素中自适应宽度或者高度,按比例显示(img标签怎么写)

如果要让img标签在给定宽高的父元素中自适应,如果自适应宽就是

div {width: 300px;height: 300px;img {width: 100%};}自适应高度

如果要让img标签在给定宽高的父元素中自适应,如果自适应宽就是

div {width: 300px;height: 300px;img {height: 100%};}如果图片的大小不一,想图片按比例显示在父元素中间,怎么办?div {width: 300px;height: 300px;img {width: 100%; height: 100%; object-fit: contain;};}

css样式属性 object-fit指定元素的内容应该如何去适应指定容器的高度与宽度。一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

fill:默认值不保证保持原有的比例,内容拉伸填充整个内容容器。 contain:保持原有尺寸比例。内容被缩放。 cover:保持原有尺寸比例。但部分内容可能被剪切。 none:保留原有元素内容的长度和宽度,也就是说内容不会被重置。 scale-down:保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。 initial:设置为默认值。 inherit:从该元素的父元素继承属性。

本文链接地址:https://www.jiuchutong.com/zhishi/294509.html 转载请保留说明!

上一篇:vue3项目实战中的接口调用方法(一)async/await用法 对axios二次封装 实现异步请求(vue3项目搭建)

下一篇:纳汉尼国家公园保护区的鸟瞰图,加拿大西北部 (© Robert Postma/Getty Images)(纳汉双语)

  • css滚动条样式代码(css 滚动条)

    css滚动条样式代码(css 滚动条)

  • 华为nova9pro是双卡双待吗(华为nova9pro是双卡双待设置)

    华为nova9pro是双卡双待吗(华为nova9pro是双卡双待设置)

  • 养老金怎么查询(养老金怎么查询交了多少年)

    养老金怎么查询(养老金怎么查询交了多少年)

  • rx470d相当于n卡什么(rx470相当于n卡什么)

    rx470d相当于n卡什么(rx470相当于n卡什么)

  • 闲鱼h价是什么意思(闲鱼的价格和原价有什么区别)

    闲鱼h价是什么意思(闲鱼的价格和原价有什么区别)

  • 短视频变现的方式分别有什么(短视频变现的方向)

    短视频变现的方式分别有什么(短视频变现的方向)

  • 三星手机更新出错了怎么办(三星新系统更新了什么)

    三星手机更新出错了怎么办(三星新系统更新了什么)

  • sata hdd是什么意思(sata hdd规格)

    sata hdd是什么意思(sata hdd规格)

  • 荣耀20可以遥控空调吗(荣耀手机可以遥控空调吗?)

    荣耀20可以遥控空调吗(荣耀手机可以遥控空调吗?)

  • 探探id有什么用(探探id有什么用?)

    探探id有什么用(探探id有什么用?)

  • 手机号码变空号了还可以恢复吗(手机号码变空号是什么原因)

    手机号码变空号了还可以恢复吗(手机号码变空号是什么原因)

  • 更改文件打开方式改不了怎么办(更改文件打开方式后如何恢复默认打开方式)

    更改文件打开方式改不了怎么办(更改文件打开方式后如何恢复默认打开方式)

  • 抖音店铺logo是什么意思(抖音店铺logo是抖音账号头像吗)

    抖音店铺logo是什么意思(抖音店铺logo是抖音账号头像吗)

  • 小米max2短信闪退(小米短信闪光灯怎么设置方法)

    小米max2短信闪退(小米短信闪光灯怎么设置方法)

  • 陌陌为啥不能语音通话了(陌陌不能语音)

    陌陌为啥不能语音通话了(陌陌不能语音)

  • 候补订单购票几率大吗(候补购票多久能买到票)

    候补订单购票几率大吗(候补购票多久能买到票)

  • xr摄像头怎么开广角(苹果xr摄像机)

    xr摄像头怎么开广角(苹果xr摄像机)

  • 苹果手机wps怎么改字体大小(苹果手机wps怎么批量删除文件)

    苹果手机wps怎么改字体大小(苹果手机wps怎么批量删除文件)

  • 华为怎么关闭新闻页面(华为怎么关闭新闻推荐)

    华为怎么关闭新闻页面(华为怎么关闭新闻推荐)

  • 转转怎么解绑实名认证(转转怎么解绑实名认证信息)

    转转怎么解绑实名认证(转转怎么解绑实名认证信息)

  • 微信横屏模式是什么(微信横屏模式是啥意思)

    微信横屏模式是什么(微信横屏模式是啥意思)

  • 怎么检测ipad电池损耗(怎么检测ipad2020电池)

    怎么检测ipad电池损耗(怎么检测ipad2020电池)

  • ppt添加图表元素在哪里(ppt图表)

    ppt添加图表元素在哪里(ppt图表)

  • 为什么公众号不能留言(为什么公众号不能置顶)

    为什么公众号不能留言(为什么公众号不能置顶)

  • mac窗口最大化快捷键(mac窗口最大化快捷)

    mac窗口最大化快捷键(mac窗口最大化快捷)

  • 抖音二维码在哪里(抖音二维码在哪生成)

    抖音二维码在哪里(抖音二维码在哪生成)

  • 开票的预收款怎么处理
  • 制造业怎么核算成本
  • 领用库存商品用于固定资产
  • 预计产品质量保证损失是什么意思
  • 以前年度损益调整科目怎么用
  • 销售防疫物资免水洗手液需要什么许可证
  • 文化事业费是什么意思
  • 增值税税控服务费的账务处理
  • 支付残保金分录怎么写
  • 水果销售公司简介
  • 资产负债表应交税费期末余额是什么意思
  • 尚未收到货款,填什么凭证
  • 资产负债表存货项目期末余额怎么算
  • 准则依据
  • 接受原材料投资的会计处理
  • 固定资产转售
  • 营改增后建筑公司自建行为所得税
  • 分公司增值税如何缴纳增值税
  • 工业用地厂房要交契税吗
  • 实收资本印花税申报期限
  • 印花税计入股票成本吗
  • 快递费可以抵扣进项税额吗
  • 建筑队能开哪些项目
  • 购销合同印花税税率
  • 鸿蒙系统桌面文件夹建立
  • 手动设定ip地址后连不上网
  • 医疗机构医疗服务自查报告怎么写
  • 华为手机悬浮导航是干什么用
  • linux命令行怎么用
  • 咨询服务费怎么报印花税
  • 买股指期货有什么条件
  • 收到税局退回增值税
  • 企业要方便客户与企业的沟通,尽可能降低
  • npp怎么安装
  • 中央公园商场
  • ajaxuploadfile
  • Vite4 + Vue3 + vue-router4 动态路由
  • 【Zabbix实战之部署篇】Zabbix客户端的安装部署方法
  • 成本降低率是什么意思
  • 总包缴税
  • 工程补偿款开什么发票
  • 图书的税率有免税的吗
  • 缴纳城镇土地税
  • 企业坏账准备贷方核算内容
  • http上传错误
  • mongodb基础知识
  • 商品流通企业流程图
  • 小企业会计准则适用范围
  • sqlserver、mysql获取连接字符串步骤
  • 金税四期上线后对个人的影响
  • 累计折旧计提会计分录
  • 水利建设基金申报表哪里
  • 员工的交通费发票可以报销嘛
  • 股权转让,受让方的会计分录
  • 委托加工的相关法律规定
  • 金税盘技术维护费可以不交吗
  • 利润表中财务费用中的利息费用和利息收入
  • 公允价值模式下出售投资性房地产
  • 建筑公司的会计好做吗
  • 发票丢失了怎么报销
  • mysql安装配置教程5.7.16
  • mysql基本教程
  • 隐藏在大山深处的罪恶
  • Mysql使用or如何优化
  • win10预览版绿屏重启解决
  • centos配置IP地址
  • macos 音量快捷键
  • 家字取名男孩名字
  • ext.formpanel
  • ubuntu系统怎么安装
  • vue中使用node
  • vue自定义组件v-html
  • 优化lr
  • maxlength属性设置为0
  • 发票在税务系统查不到对方要怎么做
  • 湖南社保费申报测算管理系统登录不了
  • 2020年民主生活会主题是什么?
  • 公司给个人买房,怎么做账
  • 核定征收申报表填写
  • 代理记账公司里的公司文件盒书写样式图片
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设