angular:简单实现图片如果超过屏幕高度则滚动置顶;没超过则水平垂直居中

news/2024/12/22 14:49:29/

问题:

        如题

解决办法:

        

  <div #imgRoot style="position: absolute; background-color: slategray; width: 100%; height: 100%;"><div #imgContainer style="background-color: slategray; padding: 3px 0; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%;"><img #img [src]="imgSrc" width="90%" alt=""/><ng-container*ngIf="(img.height < imgRoot.offsetHeight)?imgContainer.setAttribute('style', imgContainer.getAttribute('style')+';height: 100%'): imgContainer.setAttribute('style', imgContainer.getAttribute('style')+';height: auto')"></ng-container></div></div>

额外说明:

        此写法针对简单界面有效,因为ngif中有函数,会触发多次调用,如果含复杂界面可能会有性能问题。

        求轻快实现可以一步在html模板里完成,而不用去ts中搞一堆代码

        如果有其他简单实现也可以在评论区告诉我,谢谢了


http://www.ppmy.cn/news/1103437.html

相关文章

自然语言处理: 第十二章LoRA解读

论文地址:[2106.09685] LoRA: Low-Rank Adaptation of Large Language Models (arxiv.org) 理论基础 自从GPT-3.5问世以来&#xff0c;整个AI界基本都走向了大模型时代&#xff0c;而这种拥有数亿参数的大模型对于普通玩家来说作全量微调基本是不可能的事。从而微软公司提出了…

【PTA】浙江大学计算机与软件学院2019年考研复试上机自测

个人学习记录&#xff0c;代码难免不尽人意。 呃&#xff0c;今天做了做19年的复试上机题&#xff0c;死在hash表上了&#xff0c;后面详细解释。心态要好&#xff0c;心态要好 7-1 Conway’s Conjecture John Horton Conway, a British mathematician active in recreational…

腾讯云CVM标准型S4服务器性能测评_CPU_网络收发包PPS详解

腾讯云服务器CVM标准型S4性能测评&#xff0c;包括S4云服务器CPU型号、处理器主频、网络收发包PPS、队列数、出入内网带宽能力性能参数说明&#xff0c;标准型 S4 实例是次新一代的标准型实例&#xff0c;CPU采用2.4GHz主频的Intel Xeon Skylake 6148处理器&#xff0c;腾讯云百…

MySQL无法查看系统默认字符集以及校验规则

show variables like character_set_database; show variables like collation_database;这个错误信息表示MySQL在尝试访问performance_schema.session_variables表时&#xff0c;发现该表不存在。这个问题可能是由于MySQL的版本升级导致的。解决这个问题的一种方法是运行mysql…

想要精通算法和SQL的成长之路 - 课程表III

想要精通算法和SQL的成长之路 - 课程表III 前言一. 课程表III&#xff08;贪心优先队列&#xff09;1.1 优先选择截止时间更小的课程1.2 如果当前课程无法学习怎么办&#xff1f;1.3 优化 前言 想要精通算法和SQL的成长之路 - 系列导航 一. 课程表III&#xff08;贪心优先队列&…

hadoop伪分布模式配置

1、修改/usr/local/hadoop/etc/hadoop/core-site.xml和/usr/local/hadoop/etc/hadoop/hdfs-site.xml文件 core-site.xml内容 <configuration><property><name>hadoop.tmp.dir</name><value>file:/usr/local/hadoop/tmp</value><descr…

23、mysql数据库的安装

&#xff08;无图&#xff0c;简易版本&#xff09; 一、下载 点开下面的链接&#xff1a;https://dev.mysql.com/downloads/mysql/ 点击Download 就可以下载对应的安装包了 二、解压 下载完成后我们得到的是一个压缩包&#xff0c;将其解压&#xff0c;我们就可以得到MyS…

【zip密码】7z分卷压缩如何加密?

想要压缩的文件过大&#xff0c;想要在压缩过程中将文件拆分为几个压缩包并且同时为所有压缩包设置加密应该如何设置&#xff1f; 想要分卷压缩文件并加密一起操作就可以完成了&#xff0c;设置方法如下&#xff1a; 打开7-zip&#xff0c;选中需要压缩的文件&#xff0c;选择…