首页 > 其他分享 >让图片在原本的大小放大,同时不超出其父容器的大小

让图片在原本的大小放大,同时不超出其父容器的大小

时间:2024-02-20 13:56:23浏览次数:22  
标签:容器 样式 transform selector 其父 大小 图片 放大

在element中添加css样式代码

/* 确保父容器不显示溢出的内容 */
selector {
  overflow: hidden;
}

/* 图片的初始样式,设置过渡效果 */
selector img {
  transition: transform 0.5s ease;
  transform-origin: center center; /* 从中心放大 */
}

/* 鼠标悬停在图片上时的样式 */
selector img:hover {
  transform: scale(1.2); /* 放大1.2倍 */
}

  样式效果

 

标签:容器,样式,transform,selector,其父,大小,图片,放大
From: https://www.cnblogs.com/Boboschen/p/18022926

相关文章

  • python容器
    listturtlestringsetdict......
  • Docker安装Tomcat容器
    Docker安装Tomcat容器查看原文安装Tomcat#查找官方镜像dockersearchtomcat#下载最新版Tomcat镜像(其实此命令就等同于:dockerpulltomcat:latest)dockerpulltomcat#下载指定版本的Nginx镜像(xxx指具体版本号)dockerpulltomcat:xxx#检查当前所有Docker下载......
  • Docker安装Redis容器
    Docker安装Redis容器查看原文安装Redis#下载redis镜像dockerpullredis:5#检查当前所有Docker下载的镜像dockerimagesredis配置文件创建以下文件及文件夹,方便配置及管理redismkdir-p/docker/redismkdir-p/docker/redis/datatouch/docker/redis/redis.conf......
  • Docker安装MySQL容器
    Docker安装MySQL容器查看原文安装MySQL#查找官方镜像dockersearchmysql#下载mysql镜像sudodockerpullmysql:5.7#检查当前所有Docker下载的镜像dockerimages启动MySQL容器dockerrun-p3306:3306--namemysql\-v/usr/local/docker/mysql/conf:/etc/mysq......
  • Docker安装nacos容器
    Docker安装nacos容器查看原文安装nacos#查找官方镜像dockersearchnacos#下载nacos镜像dockerpullnacos/nacos-server#检查当前所有Docker下载的镜像dockerimagesnacos配置文件#新建logs目录mkdir-p/docker/nacos/logs/mkdir-p/docker/redis/init.d/#......
  • IOC容器设计学习
    Spring简介:以IOC与AOP为内核。分层框架。轻量级(不需要依赖其他软件,只需要JVM,容器环境)Spring的核心结构每个模块对应一个Jar包。 1.4IOC思想讲解IOC和AOP不是Spring提出的。spring在技术上很好的把这两个思想实现1)什么是IoCInversionofControl.(控制反转),这是一个......
  • Window10 通过 SSH 访问 Docker 容器
    参考https://zhuanlan.zhihu.com/p/462481693https://blog.csdn.net/piaopu0120/article/details/120550181https://blog.csdn.net/qq_27865227/article/details/121649574https://blog.csdn.net/fighterandknight/article/details/124478429环境软件/系统版本说明......
  • 数组 容器 递归 普通排序 线性排序
    《数据结构与算法之美》读书笔记写在前面这本书的大部分内容比较浅显,因此只挑DSAA课程上没有涉及或没有深入讨论的点总结第二章数组相关提高传统数组插入/删除数据效率的方法:如果插入的数据不要求有序,可以直接把某位的原数据替换成新数据,然后把原数据放到数组末尾,避免大......
  • docker中如何修改容器的时间
    使用方法首先,使用dockerps命令查找正在运行的容器的ID或名称。例如,假设容器名称是mytongweb使用以下命令进入容器的shell环境dockerexec-itmytongweb/bin/bash#这将进入容器的bashshell在容器的shell中,使用date命令来设置日期和时间,与在 Linux 中操作一样。使用以......
  • 在k8S中,容器内日志是怎么采集的?
    在Kubernetes(k8s)中,容器内日志的采集通常采用以下几种方法:标准输出和错误流:Kubernetes默认将容器的标准输出(stdout)和标准错误输出(stderr)作为日志源。当容器运行时,这些信息会通过kubectllogs命令或API直接访问。Dockerdaemon会将这些输出捕获并存储在宿主机上的一个特定......