当前位置： 首页 > news >正文

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

news 2025/7/5 15:53:57

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

<!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>

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

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

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

相关文章：

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

下面的两种解决办法都会导致图片缩小&#xff0c;可以给图片进行初始化的宽高设置 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge">…...

编程日记 2023/9/12 11:29:44

QML、C++ 和 JS 三者之间的交互

QML、C++ 和 JS 三者之间的交互是 Qt Quick 应用开发的核心。以下是它们之间交互的常见方式： 从 QML 调用 C++ 函数要从 QML 调用 C++ 函数，您可以使用 Qt 的 QML 注册机制，例如 qmlRegisterType，将 C++ 类注册为 QML 类型。 C++ 代码： #include <QGuiApplication>…...

编程日记 2023/9/12 11:28:43

ProEasy机器人：TCP无协议通讯（socket通讯）时打印log日志

打印日志需要调用lua中的io相关文件函数与os相关时间函数&#xff0c;代码如下 --------TCP无协议视觉通讯------- function open_client_Vision() --连接视觉服务器 打开以太网作为客户端 repeat FreePort.ECM_CloseAll() --关闭所有链接 …...

编程日记 2023/9/12 11:26:41

算法通过村第六关-树白银笔记|层次遍历

文章目录 前言1. 层次遍历介绍2. 基本的层次遍历与变换2.1 二叉树的层次遍历2.2 层次遍历-自底向上2.3 二叉树的锯齿形层次遍历2.4 N叉树的层次遍历 3. 几个处理每层元素的题目3.1 在每棵树行中找出最大值3.2 在每棵树行中找出平均值3.3 二叉树的右视图3.4 最底层最左边 总结 前…...

编程日记 2023/9/12 11:25:39

SpringCloud理解篇

一、微服务概述 1、什么是微服务 目前的微服务并没有一个统一的标准&#xff0c;一般是以业务来划分将传统的一站式应用&#xff0c;拆分成一个个的服务&#xff0c;彻底去耦合&#xff0c;一个微服务就是单功能业务&#xff0c;只做一件事。 与微服务相对的叫巨石 。 2、微服…...

编程日记 2023/9/12 11:24:38

编写LED灯的驱动，实现三盏灯的控制

mychrdev.c #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include <linux/uaccess.h> #include <linux/io.h> #include "head.h"unsigned int major; // 保存主设备号 char kbuf[128]{0}; unsigned int…...

编程日记 2023/9/12 11:23:37

Flink报错处理-1

在 flink job 运行一段时间后&#xff0c;观察日志发现出现了如下的 warn日志&#xff1a; The operator name {} exceeded the {} characters length limit and was truncated 完整的 warn 日志如下&#xff1a; The operator name TriggerWindow(GlobalWindows(), ListStat…...

编程日记 2023/9/12 11:22:36

bim与数字孪生智能建造的关系

随着建筑业数字化改革的推进&#xff0c;我们正迈入数字孪生时代&#xff0c;而真正实现建筑物数字孪生的智能建造&#xff0c;其基础前提是建造对象和建造过程的高度数字化&#xff0c;这样一个过程唯有依托BIM建立数据模型才能实现&#xff0c;真正达到智能建造或智慧运维。 …...

编程日记 2023/9/12 11:21:36

【Linux】进程篇（补）：守护进程

文章目录 1. 补充1.1 查看1.2 控制进程组的方式 2. 创建守护进程step1. 忽略信号step2. 让自己不是组长step3. setsid 函数&#xff1a;给调用函数设置新的会话和进程组 IDstep4. chdir 函数&#xff1a;可以改变守护进程的工作路径step5. 处理文件描述符 0、1、2 守护进程类样…...

编程日记 2023/9/12 11:20:34

SpringMVC自定义视图完成步骤 和 视图解析的源码剖析

自定义视图完成步骤&#xff1a; ● 7.2.1自定义视图完成步骤 1. 自定义视图**:** 创建一个 View 的 bean, 该 bean 需要继承自 AbstractView, 并实现 renderMergedOutputModel 方法**.** 2. 并把自定义 View 加入到 IOC 容器中 3. 自定义视图的视图处理器&#xff0c;使用…...

编程日记 2023/9/12 11:19:34

合宙Air724UG LuatOS-Air lvgl字库

目录 LVGL 简介1. lvgl自带字库 特点使用场景2. lvgl加载外部字体 软件接口使用场景3. lvgl 矢量字体 软件接口硬件外接SPI字库芯片详细使用示例使用场景常见问题 LVGL 简介 LVGL字库有3种方式可以使用&#xff0c;刚接触的客户可能不太了解怎样选用&#xff0c;以下对这3种…...

编程日记 2023/9/12 11:18:32

C#，数值计算——指数微分（exponential deviates）的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// 指数偏差 /// Structure for exponential deviates. /// </summary> public class Expondev : Ran { private double beta { get; set; } /// <s…...

编程日记 2023/9/12 11:17:29

ADAS自动驾驶

文章目录 ADAS技术现状ADAS功能的主流方案ADAS控制器开发自动驾驶技术现状自动驾驶域控制器开发智能驾驶域控制器芯片选择 ADAS技术现状 自动驾驶辅助系统&#xff08;ADAS&#xff0c;Advanced Driver Assistance Systems&#xff09;是一种用于提高驾驶安全和舒适性的技术&a…...

编程日记 2023/9/12 11:16:27

Python从零到一构建项目

随着互联网的发展&#xff0c;网络上的信息量急剧增长&#xff0c;而获取、整理和分析这些信息对于很多人来说是一项艰巨的任务。而Python作为一种功能强大的编程语言&#xff0c;它的爬虫能力使得我们能够自动化地从网页中获取数据&#xff0c;大大提高了效率。本文将分享如何…...

编程日记 2023/9/12 11:15:26

使用todesk或者向日葵远程Ubuntu22.04系统的客户机黑屏

[TOC](使用todesk或者向日葵远程Ubuntu22.04系统的客户机黑屏) 目录 1. 故障现象 2. 分析 3. 解决办法 4. 参考文章 1. 故障现象 使用todesk或者向日葵远程客户机&#xff08;Ubuntu22.04系统&#xff09;时&#xff0c;显示黑屏 2. 分析 本故障可能是因为Ubuntu22.04的图…...

编程日记 2023/9/12 11:14:25

JBoss JMXInvokerServlet 反序列化漏洞复现(CVE-2015-7501)

一、漏洞说明 JBoss中/invoker/JMXInvokerServlet路径对外开放&#xff0c;JBoss的jmx组件支持反序列化。JBoss在/invoker/JMXInvokerServlet请求中读取了用户传入的对象&#xff0c;然后我们利用Apache Commons Collections中的Gadget执行任意代码。 二、影响版本 JBoss Enter…...

编程日记 2023/9/12 11:13:23

比Mojo慢68000倍，Python性能差的锅该给GIL吗？

# 关注并星标腾讯云开发者 # 每周1 | 鹅厂工程师带你审判技术 # 第3期 | 李志瑞&#xff1a;天使还是魔鬼&#xff1f;聊聊 Python GIL 9 月 7 日&#xff0c;新兴编程语言 Mojo 正式发布。Mojo 的最初设计目标是比 Python 快 35000 倍&#xff0c;近期该团队表示&#xff0c;因…...

编程日记 2023/9/12 11:12:22

CSS读书笔记

——————————————精华部分—————————————— 1、选择器 &#xff08;1&#xff09;基本选择器&#xff1a; 标签选择器 body{} 类选择器 class .class名称{} ID选择器 id #id名称{} 优先级&#xff1a;ID选择器 > 类选择器 > 标签选择器 &am…...

编程日记 2023/9/12 11:11:21

Qt使用QSqlDatabase remoeDatabase()连接提示仍在使用解决方案

问题描述 调用QSqlDatabase的removeDatabase函数的时候&#xff0c;出现了如下错误 QSqlDatabasePrivate::removeDatabase: connection 05465461654654 is still in use, all queries will cease to work官方示例 [static] void QSqlDatabase::removeDatabase(const QString &…...

编程日记 2023/9/12 11:10:19

管易云与金蝶云星空对接集成仓库查询打通仓库新增

管易云与金蝶云星空对接集成仓库查询打通仓库新增 接通系统&#xff1a;管易云 管易云是金蝶旗下专注提供电商企业管理软件服务的子品牌&#xff0c;先后开发了C-ERP、EC-OMS、EC-WMS、E店管家、BBC、B2B、B2C商城网站建设等产品和服务&#xff0c;涵盖电商业务全流程。 对接目…...

编程日记 2023/9/12 11:09:18

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/6/23 4:26:10

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/6/15 18:44:30

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/7/4 16:27:22

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/7/2 16:58:56

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/7/4 8:53:10

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2025/6/24 1:49:00

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/6/21 10:34:52

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/7/4 6:01:06

聚六亚甲基单胍盐酸盐市场深度解析：现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

编程新知 2025/7/4 22:54:00

用 Rust 重写 Linux 内核模块实战：迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...

编程新知 2025/7/4 15:03:44