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

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

javascript 复制代码
<!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.offsetWidth
            let parentHeight = box.offsetHeight
            if (childRawWidth > childRawHeight) {
                image.style.width = childRawHeight + 'px'
            }
            image.style.transform = `rotate(${deg}deg)`
        }
    }
</script>
</html>

原始图片:

超出的效果图:

解决之后的效果图:

相关推荐
曹牧11 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台11 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪10011 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc12 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
繁花与尘埃13 小时前
CSS引入方式(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习
吃饺子不吃馅13 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学
Baklib梅梅13 小时前
无头内容管理系统:打造灵活高效的多渠道内容架构
前端·ruby on rails·前端框架·ruby
over69714 小时前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript
over69714 小时前
弹性布局完全指南:从文档流到Flexbox实战
css
渣渣盟15 小时前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化