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

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.lryc.cn/news/164314.html

相关文章:

  • QML、C++ 和 JS 三者之间的交互
  • ProEasy机器人:TCP无协议通讯(socket通讯)时打印log日志
  • 算法通过村第六关-树白银笔记|层次遍历
  • SpringCloud理解篇
  • 编写LED灯的驱动,实现三盏灯的控制
  • Flink报错处理-1
  • bim与数字孪生智能建造的关系
  • 【Linux】进程篇(补):守护进程
  • SpringMVC自定义视图完成步骤 和 视图解析的源码剖析
  • 合宙Air724UG LuatOS-Air lvgl字库
  • C#,数值计算——指数微分(exponential deviates)的计算方法与源程序
  • ADAS自动驾驶
  • Python从零到一构建项目
  • 使用todesk或者向日葵远程Ubuntu22.04系统的客户机黑屏
  • JBoss JMXInvokerServlet 反序列化漏洞复现(CVE-2015-7501)
  • 比Mojo慢68000倍,Python性能差的锅该给GIL吗?
  • CSS读书笔记
  • Qt使用QSqlDatabase remoeDatabase()连接提示仍在使用解决方案
  • 管易云与金蝶云星空对接集成仓库查询打通仓库新增
  • ubuntu 安装 Mongodb 4.0、4.2、4.4
  • 详解Hugging Face Transformers的TrainingArguments
  • 【LeetCode-中等题】17. 电话号码的字母组合
  • 读高性能MySQL(第4版)笔记06_优化数据类型(上)
  • mac如何创建mysql数据库
  • Ceph入门到精通-centos8 install brctl
  • sqli第一关
  • 入行IC | 新人入行IC选择哪个岗位更好?
  • 时间旅行的Bug 奇怪的输入Bug
  • 解决nbsp;不生效的问题
  • 【Lidar】Cloud Compare介绍安装包