CSS中图片旋转超出父元素解决办法

下面的两种解决办法都会导致图片缩小,可以给图片进行初始化的宽高设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body {margin: 0;padding: 0;}#box {box-sizing: border-box;width: 100%;height: 240px;background: pink;}#image {transform: rotate(0);object-fit: contain;}#btn {margin-top: 100px;}</style>
</head>
<body><div id="box"><img id="image" src="https://www.runoob.com/images/pulpit.jpg" alt=""><!-- <img id="image" src="https://pics0.baidu.com/feed/c2cec3fdfc039245259830d9727ca5c77c1e2521.jpeg@f_auto?token=b910f4287521294b9469788c77a3ac93&s=A12326BEC5137FDECCBC8DC1030060BB" alt=""> --></div><button id="btn">旋转</button>
</body>
<script>window.onload = () => {let btn = document.getElementById('btn')let image = document.getElementById('image')let box = document.getElementById('box')let childRawWidth = image.offsetWidth // 原始的图片宽let childRawHeight = image.offsetHeight  // 原始的图片高let deg = 0 btn.onclick = function() {if (deg > 360) {deg = 0} else {deg += 90}// 方法一:使用 scale -- 父元素的高度不固定// let childWidth = image.offsetWidth// let childHeight = image.offsetHeight// let scalePix = 1// if (childWidth > childHeight) {//     scalePix = childHeight / childWidth// } else {//     scalePix = childWidth / childHeight// }// image.style.transform = `rotate(${deg}deg) scale(${scalePix}, 1)`// 方法二:将图片重新设置宽高 -- 父元素的高度固定let parentWidth = box.offsetWidthlet parentHeight = box.offsetHeightif (childRawWidth > childRawHeight) {image.style.width = childRawHeight + 'px'}image.style.transform = `rotate(${deg}deg)`}}
</script>
</html>

原始图片:
在这里插入图片描述

超出的效果图:
在这里插入图片描述

解决之后的效果图:
在这里插入图片描述

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

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

相关文章

使用 Web HID API 在浏览器中进行HID设备交互(纯前端)

文章目录 目的基础说明示例工程&#xff08;HID透传测试工具&#xff09;总结 目的 最近再搞HID透传 《STM32 USB使用记录&#xff1a;HID类设备&#xff08;后篇&#xff09;》 。 市面上的各种测试工具都或多或少存在问题&#xff0c;所以就自己写一个工具进行测试。目前来…

uni-app 客服按钮可上下拖动动

项目需求&#xff1a; 因为悬浮客服有时候会遮挡住界面内容&#xff0c;故需要对悬浮的气泡弹窗做可拖动操作 movable-area&#xff1a;可拖动区域 movable-view&#xff1a;可移动的视图容器&#xff0c;在页面中可以拖拽滑动或双指缩放。 属性说明 属性名类型默认值说…

四川玖璨电子商务有限公司:短视频有什么运营

根据短视频有什么运营&#xff0c;短视频的拍摄工具多种多样。无论是在手机上拍摄还是使用专业摄影设备&#xff0c;拍摄短视频的目的都是为了吸引观众的注意力和提升内容的质量。从小花费到高投入&#xff0c;在不断发展的短视频行业中&#xff0c;拍摄方法也得到了不断创新和…

Redis未授权访问漏洞复现

Redis 简单使用 Redis 未设置密码&#xff0c;客户端工具可以直接链接。 Redis 是非关系型数据库系统&#xff0c;没有库表列的逻辑结构&#xff0c;仅仅以键值对的方式存储数据。 先启动容器 Redis 未设置密码&#xff0c;客户端工具可以直接链接 https://github.com/xk11z/…

Redis的数据类型到底有什么奥秘

这里我们先只介绍五种常用的数据类型~ 目录 1、string 2、hash 3、list 4、set 5、zset 6、示例 1、string 数据类型&#xff1a;string内部编码&#xff1a;raw、int、embstr 说明&#xff1a; raw是最基本的字符串--底层是一个char数组&#xff08;此处的char是一个字…

【Element】Vue+Element表单校验详解

Element表单校验 作为一个后端开发&#xff0c;总结一下实际工作中表单校验的场景和用法。 Element官网&#xff1a;https://element.eleme.cn/#/zh-CN/component/form 代码地址&#xff1a;https://gitee.com/kkmy/kw-microservices/tree/master/kw-ui/kwsphere 常用表单校验场…

Java 中数据结构HashSet的用法

Java HashSet HashSet 基于 HashMap 来实现的&#xff0c;是一个不允许有重复元素的集合。 HashSet 允许有 null 值。 HashSet 是无序的&#xff0c;即不会记录插入的顺序。 HashSet 不是线程安全的&#xff0c; 如果多个线程尝试同时修改 HashSet&#xff0c;则最终结果是…

深度学习环境搭建笔记(二):mmdetection-CPU安装和训练

文章目录 第一步&#xff1a;安装anaconda第二步&#xff1a;安装虚拟环境第三步&#xff1a;安装torch和torchvision第四步: 安装mmcv-full第五步: 安装mmdetection第六步&#xff1a;测试环境第七步&#xff1a;训练-目标检测7.1 准备数据集7.2 检查数据集7.3 训练网络 第一步…

计算机毕业设计 社区买菜系统 Vue+SpringBoot+MySQL

作者主页&#xff1a;Designer 小郑 作者简介&#xff1a;Java全栈软件工程师一枚&#xff0c;来自浙江宁波&#xff0c;负责开发管理公司OA项目&#xff0c;专注软件前后端开发、系统定制、远程技术指导。CSDN学院、蓝桥云课认证讲师&#xff0c;全栈领域优质创作者。 项目内容…

electron win系统通知修改通知标题栏

标题栏的 electron.app.Electron 如何修改&#xff1a; var package require("../package.json"); app.setAppUserModelId(package.description); app.setAppUserModelId 在主进程的app这里修改

R语言Meta分析核心技术

Meta分析是针对某一科研问题&#xff0c;根据明确的搜索策略、选择筛选文献标准、采用严格的评价方法&#xff0c;对来源不同的研究成果进行收集、合并及定量统计分析的方法&#xff0c;最早出现于“循证医学”&#xff0c;现已广泛应用于农林生态&#xff0c;资源环境等方面。…

SpringBoot2.0(Spring读取配置文件常用方法,打war包在Tomcat中启动)

目录 一&#xff0c;SpringBoot中读取配置文件的常用方法1.1&#xff0c;使用Value读取1.2&#xff0c;使用ConfigurationProperties1.3&#xff0c;使用Environment1.4&#xff0c;自定义配置文件读取 二&#xff0c;SpringBoot部署war项目到tomcat9和启动原理 一&#xff0c;…

详解4种类型的爬虫技术

聚焦网络爬虫是“面向特定主题需求”的一种爬虫程序&#xff0c;而通用网络爬虫则是捜索引擎抓取系统&#xff08;Baidu、Google、Yahoo等&#xff09;的重要组成部分&#xff0c;主要目的是将互联网上的网页下载到本地&#xff0c;形成一个互联网内容的镜像备份。 增量抓取意…

【vue】vuex持久化插件vuex-persistedstate:

文章目录 一、说明&#xff1a;二、手动利用HTML5的本地存储&#xff1a;三、利用vuex-persistedstate插件【1】安装【2】配置使用【3】存储sessionStorage的情况【4】存储cookie的情况【5】默认持久化所有state&#xff0c;指定需要持久化的state,配置如下【6】vuex引用多个插…

公园气象站——观测实时气象,保障游客安全

公园气象站是一种用于监测和记录气象数据的系统。在公园内设置公园气象站可以帮助我们了解公园内的气候状况&#xff0c;包括空气湿度、空气温度、风速和风向等参数。这些数据是公园管理、游客安全和环境保护等方面重要的辅助依据。 负氧离子监测&#xff1a;负氧离子是指空气…

数学建模--非多项式拟合法的Python实现

目录 1.算法异同区别 2.算法核心步骤 3.算法核心代码 4.算法效果展示 1.算法异同区别 #*************************************************************************************************************# 方法区别探究 1.对于多项式拟合你需要大致知道这些点的分布&#xf…

Dubbo 接口测试原理及多种方法实践总结

1、什么是 Dubbo&#xff1f; Dubbo 最开始是应用于淘宝网&#xff0c;由阿里巴巴开源的一款优秀的高性能服务框架&#xff0c;由 Java 开发&#xff0c;后来贡献给了 Apache 开源基金会组织。 下面以官网的一个说明来了解一下架构的演变过程&#xff0c;从而了解 Dubbo 的诞…

开了抖店后就可以直播带货了吗?想在抖音带货的,建议认真看完!

我是王路飞。 关于抖店和直播带货的关系&#xff0c;其实很多人经常搞不清楚。 不然的话&#xff0c;也不会有这个问题的出现了&#xff1a;开了抖店后就可以直播带货了吗&#xff1f; 在我看来&#xff0c;这个问题很简单&#xff0c;但在不了解抖音电商和直播带货其中门道…

The WebSocket session [x] has been closed and no method (apart from close())

在向客户端发送消息时&#xff0c;session关闭了。 不管是单客户端发送消息还是多客户端发送消息&#xff0c;在发送消息之前判断session 是否关闭 使用 isOpen() 方法

Elasticsearch 8.X 可以按照数组下标取数据吗?

1、线上环境问题 老师、同学们&#xff0c;有人遇到过这个问题么&#xff0c;索引中有一个 integer 数组字段&#xff0c;然后通过脚本获取数组下标为1的值作为运行时字段&#xff0c;发现返回的值是乱的&#xff0c;并不是下标为1的值&#xff0c; 具体如下: DELETE my_index …