当图像占据 > 50% 的屏幕时，如何删除 CSS:Float 属性

【问题标题】：How do I remove the CSS:Float property when image occupies >50% of screen当图像占据 > 50% 的屏幕时，如何删除 CSS:Float 属性
【发布时间】：2019-12-21 18:30:25
【问题描述】：

我有一个响应速度最快的 Wordpress 网站，其中一些图像左对齐或右对齐。我想在这些对齐图像占据屏幕的一定百分比（大约 %50）时删除它们的浮动属性，因为它会导致文本显示方式出现问题（图像旁边的一个单词，然后是段落的其余部分）。

当我删除浮动属性时，我从网站上得到了我想要的行为，但我不知道如何设置它，所以它只在这些条件下触发。

以下是受影响图像的 CSS。

img {
display: inline-block;
max-width: 100%;
}

.align-right {
float: right;
}

【问题讨论】：

如果所有图像的宽度相同，您将需要 javascript 来进行计算或使用媒体查询来判断何时遇到断点

标签： css image responsive-design css-float image-resizing

【解决方案1】：

您应该使用javascript计算窗口的宽度并与图像的宽度进行比较。

function myFunction() {
            var img = document.getElementById("Image");

            var div = document.getElementById("myDiv");

            if (img.offsetWidth > window.innerWidth / 2) {
                div.style.cssFloat = "none";
            }
            else {
                div.style.cssFloat = "right";
            }
        }

img {
            display: inline-block;
            max-width: 100%;
            width: 400px;
            background-color: lightgrey;
            height: 200px;
        }

<body onresize="myFunction()" onload="myFunction()">
    <div>
        <img id="Image" src="" alt="Image" />
        <div id="myDiv" style="background-color: lightgrey;">
            Hello This is Div.
        </div>
    </div>
</body>

在整页中显示结果以获得更好的结果。

【讨论】：