位置: 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)(纳汉双语)

  • 美团APP闪购超市在哪里(美团闪购超市是什么)

    美团APP闪购超市在哪里(美团闪购超市是什么)

  • 苹果11如何设置自定义铃声(苹果11如何设置来电铃声)

    苹果11如何设置自定义铃声(苹果11如何设置来电铃声)

  • mos是什么(mos是什么控制型器件)

    mos是什么(mos是什么控制型器件)

  • 苹果xr手机屏幕调节灵敏怎么办(苹果xr手机屏幕不亮了但能听到声音怎么办)

    苹果xr手机屏幕调节灵敏怎么办(苹果xr手机屏幕不亮了但能听到声音怎么办)

  • 剪映怎么降噪不成功呢(剪映怎么设置降噪)

    剪映怎么降噪不成功呢(剪映怎么设置降噪)

  • 雅迪60v怎么看电量显示(雅迪电瓶车如何看电量)

    雅迪60v怎么看电量显示(雅迪电瓶车如何看电量)

  • 抖音显示在线时间准确吗(抖音显示在线时间,两天以上就不显示了吗)

    抖音显示在线时间准确吗(抖音显示在线时间,两天以上就不显示了吗)

  • qq震动在哪里设置(qq振动怎么设置)

    qq震动在哪里设置(qq振动怎么设置)

  • 快手推广别人会显示推广吗(快手推广别人能看到被推广吗)

    快手推广别人会显示推广吗(快手推广别人能看到被推广吗)

  • 路由器ax和ac区别(路由器ax与ac)

    路由器ax和ac区别(路由器ax与ac)

  • oppo高性能模式有什么用(OPPO高性能模式在哪里)

    oppo高性能模式有什么用(OPPO高性能模式在哪里)

  • 手机去打印店怎么打印(可以用手机去打印店)

    手机去打印店怎么打印(可以用手机去打印店)

  • vivo文件管理压缩包能删吗(vivo手机文件管理的压缩包可以删除吗)

    vivo文件管理压缩包能删吗(vivo手机文件管理的压缩包可以删除吗)

  • 蓝牙耳机一个声音大一个声音小(蓝牙耳机一个声音特别小)

    蓝牙耳机一个声音大一个声音小(蓝牙耳机一个声音特别小)

  • ipadair可以接u盘吗(ipadair可以外接u盘)

    ipadair可以接u盘吗(ipadair可以外接u盘)

  • 如何打开麦克风权限(华为手机如何打开麦克风)

    如何打开麦克风权限(华为手机如何打开麦克风)

  • 抖音单方面关注对方有提醒吗(抖音单方面关注可以分享视频吗)

    抖音单方面关注对方有提醒吗(抖音单方面关注可以分享视频吗)

  • 绿洲怎么保存图片到手机(绿洲如何保存图片)

    绿洲怎么保存图片到手机(绿洲如何保存图片)

  • 手机扫描二维码记录怎么查(手机扫描二维码下载app步骤)

    手机扫描二维码记录怎么查(手机扫描二维码下载app步骤)

  • 手机微信怎么找回记录(手机微信怎么找身份证号码)

    手机微信怎么找回记录(手机微信怎么找身份证号码)

  • 8分钟的视频怎么发微信(8分钟的视频怎么发给qq好友)

    8分钟的视频怎么发微信(8分钟的视频怎么发给qq好友)

  • 微博一个手机号可以绑定几个账号(微博一个手机号可以注册几个小号)

    微博一个手机号可以绑定几个账号(微博一个手机号可以注册几个小号)

  • 安大略省的圣诞树农场,加拿大 (© FatCamera/Getty Images Plus)(安大略省节日)

    安大略省的圣诞树农场,加拿大 (© FatCamera/Getty Images Plus)(安大略省节日)

  • 其他权益工具投资科目编码
  • 增值税进项税抵扣时间
  • 印花税核定依据和核定比例
  • 税务师考试考几门几年考完
  • 补报以前年度收入后当年所得税怎么处理
  • 计提坏账准备的做法体现了
  • 报送会计报表
  • 物业公司财务制度及核算方法
  • 账目不清什么意思
  • 劳务收入个税的计算方法
  • 应收账款换入固定资产双方账务处理
  • 实报实销电话费
  • 当月开的发票当月已付款怎么做分录?
  • 小规模纳税人的税率是多少
  • 上缴税费总额包括个税吗?
  • 年终奖个税筹划临界点
  • 普票记账联可以报销吗
  • 营改增后房地产企业增值税税收筹划存在问题
  • 报税了没有交税可以领发票吗
  • 工程预算调整的主要内容
  • 存货占比小有什么影响
  • 购入土地使用权增值税税率
  • 个人向公司借贷需要交税吗
  • 二月份个税申报时间
  • 工资不用交税还用上报么
  • 固定资产减值准备可以税前扣除吗
  • 印花税的购销合同改成买卖合同了吗?
  • c盘文件详解
  • redis使用php
  • 酒店需要的原材料和包装费有哪些
  • 发票多盖了一个发票章咋办
  • wrme.exe是什么
  • CodeIgniter针对数据库的连接、配置及使用方法
  • failed to execute goal org.apache
  • 应交税费会计分录例题
  • smarty怎么用
  • 委托贷款业务是资产业务吗
  • 怎么配置tomcat服务器
  • thinkphp3.x中display方法及show方法的用法实例
  • 服务器连接方式包括直接相连,间接连接
  • es6面试题promise
  • discuz怎么添加diy模块
  • 其他综合收益转入留存收益还是投资收益
  • 小规模纳税人零申报流程
  • 研发失败能做加工企业吗
  • C++ 使用dll路径不在当前路径时如何调用
  • 织梦cms官网
  • 软件公司股权
  • 企业预付账款科目设置
  • 浅谈数据库优化设计
  • 企业现金流量表怎么分析
  • 诉讼费可以退回私账嘛
  • 暂估入账的固定资产
  • 增值税专用发票和普通发票的区别
  • 顾客办理会员卡要怎么做账?
  • 非流动资产减少
  • 金蝶主要业务及软件产品
  • 总产值的计算方法是什么
  • 进项税额抵扣是按税率分开抵扣吗
  • 转账手续费怎么入账
  • 建安发票是增值税发票吗
  • 营销活动费计入成本吗
  • 什么是增资扩股协议
  • 年初建账考虑要点业务流程是否变化
  • Mysql 5.7.19 winx64 ZIP Archive 安装及使用过程问题小结
  • 微软和苹果是什么关系
  • linux终端记录
  • redhat语言设置中文
  • win10蓝屏stopcode
  • ubuntu操作系统入门
  • grep正则表达式运用举例
  • 怎么激活win7旗舰版系统
  • css各种滤镜的应用是什么
  • python怎么用
  • js 堆排序
  • javascript命名规范
  • 安卓打包安装程序apk
  • 国税网上开票怎么不显示界面
  • 本期预缴税额怎么填
  • 契税维修基金交给谁
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设