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

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

news 文章来源：https://blog.csdn.net/Y1914960928/article/details/132690703 2024/11/1 8:53:41

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

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

ubuntu 安装 Mongodb 4.0、4.2、4.4

1. 安装 # 配置apt Repository mongodb 4.0&#xff0c; 4.2&#xff0c; 4.4 $ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 68818c72e52529d4 #4.0 $ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 4B7C549A058F8B6B #4.2 $ …...

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

详解Hugging Face Transformers的TrainingArguments

前言&#xff1a; TrainingArguments是Hugging Face Transformers库中用于训练模型时需要用到的一组参数&#xff0c;用于控制训练的流程和效果。 使用示例&#xff1a; from transformers import Trainer,TrainingArguments training_args TrainingArguments(output_dir&q…...

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

【LeetCode-中等题】17. 电话号码的字母组合

文章目录 题目方法一&#xff1a;递归回溯 题目 方法一&#xff1a;递归回溯 参考讲解&#xff1a;还得用回溯算法&#xff01;| LeetCode&#xff1a;17.电话号码的字母组合 首先可以画出树图&#xff1a; 先将数字对应的字符集合 加入到一个map集合 这里需要一个index来控…...

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

读高性能MySQL（第4版）笔记06_优化数据类型（上）

1. 良好的逻辑设计和物理设计是高性能的基石 1.1. 反范式的schema可以加速某些类型的查询&#xff0c;但同时可能减慢其他类型的查询 1.2. 添加计数器和汇总表是一个优化查询的好方法&#xff0c;但它们的维护成本可能很 1.3. 将修改schema作为一个常见事件来规划 2. 让事情…...

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

mac如何创建mysql数据库

使用mac创建mysql数据库十分简单&#xff0c;我们只需要按照以下步骤即可完成。 首先&#xff0c;我们需要安装mysql&#xff0c;我们可以通过官网下载对应的安装包&#xff0c;或者通过Homebrew进行安装。 接下来&#xff0c;我们需要启动mysql服务&#xff0c;在终端中输入以…...

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

Ceph入门到精通-centos8 install brctl

在centos7上是可以直接yum安装bridge-utils的&#xff0c;但是centos8不行 经过分析 brctl有提供centos的rpm包&#xff0c;里面只有一个二进制脚本&#xff0c;所以直接下载安装即可 rpm -ivh http://mirror.centos.org/centos/7/os/x86_64/Packages/bridge-utils-1.5-9.el7…...

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

sqli第一关

1.在下使用火狐访问sqlilabs靶场并使用burpsuite代理火狐。左为sqlilabs第一关&#xff0c;右为burpsuite。 2.输入?id1 and 11 与?id1 and 12试试 可以看出没有变化哈&#xff0c;明显我们输入的语句被过滤了。在?id1后面尝试各种字符&#xff0c;发现单引号 包…...

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

入行IC | 新人入行IC选择哪个岗位更好？

很多同学入行不知道怎么选择岗位。IC的岗位一般有设计、验证、后端、封装、测试、FPGA等等。但是具体到每个人身上&#xff0c;就要在开始的时候确定下你要找的职位&#xff0c;可以有两个或三个&#xff0c;但是要分出主次&#xff0c;主次不分会让你纠结整个找工作的过程。 …...

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

时间旅行的Bug 奇怪的输入Bug

故事一&#xff1a;时间旅行的Bug 在一个普通的工作日&#xff0c;程序员小明正在开发一个时间旅行的应用程序。这个应用程序可以让用户选择一个特定的日期和时间&#xff0c;然后将用户的意识传送到过去或未来的那个时刻。小明对这个项目非常兴奋&#xff0c;他认为这将是一个…...

编程日记 2023/9/12 11:00:08

解决nbsp；不生效的问题

代码块 {{title}} title:附 \xa0\xa0\xa0件,//或者 <span v-html"title"></span> title:附 件&#xff1a;,效果图...

编程日记 2023/9/12 10:59:07

ps网站设计素材/黄页网络的推广网站有哪些软件

如何在Android中使用Alarm Manager启动服务&#xff1f;在我的应用程序中&#xff0c;我正在尝试使用警报管理器启动服务。当我点击按钮时&#xff0c;服务应该在我给出的特定时间开始。我的警报管理器代码如下&#xff1a;public void onClick(View view) {if(view m_btnActi…...

编程日记 2024/11/1 8:43:37

网站如何做吸引人的项目/汕头seo托管

书上的代码已完全不可参考&#xff0c;只好按知识点从网上查资料一个一个实例 了。 <!DOCTYPE html> <html> <head><title>ExtJs</title><meta http-equiv"Content-Type" content"text/html; charsetutf-8"/><link…...

编程日记 2024/11/1 3:08:48

幼儿园网站如何建设/互联网营销师培训教程

Mybatis plus中使用in查询出错如何解决,参数,解决方法,代码,语句,这段Mybatis plus中使用in查询出错如何解决易采站长站&#xff0c;站长之家为您整理了Mybatis plus中使用in查询出错如何解决的相关内容。不想看我bb的直接点上面的 ‘解决方法‘我的情况是这样的&#xff0c;在…...

编程日记 2024/11/1 1:17:45

网易邮箱网页版/上海外包seo

这里只写cacti监控lvs的部分&#xff0c;前提是cacti安装完成。服务端&#xff08;下载2个附件&#xff09;1.服务端添加模板cacti_data_query_snmp_lvs.xml2.将 snmp-lvs.xml 拷贝到source 目录下客户端(lvs机器-这里针对5和4的32位系统&#xff0c;el5_64位不适用)A 安装 net…...

编程日记 2024/10/31 20:26:48

自己做网站挣钱不/360优化大师下载

最近写个http客户端的小程序&#xff0c;由于http是基于tcp的无消息边界保护的协议&#xff0c;所以接受时必须要确定接受数据的数量才能完整接收数据。传统的方式&#xff0c;只要先接收到Content-Length就可以通过这个长度接受消息体部分了。而transfer-encoding:chunked的引…...

编程日记 2024/10/31 19:00:52

做网站用什么cms/如何制作一个网址

点击左上方蓝字关注我们7月27日&#xff0c;百度与中国计算机学会&#xff08;以下简称CCF&#xff09;联合成立的“CCF-百度松果基金”&#xff08;以下简称松果基金&#xff09;在京举行签约仪式&#xff0c;双方将联手面向海内外高校及科研院所的青年学者&#xff0c;搭建产…...

编程日记 2024/10/31 18:54:49