JS滚动在Chrome浏览器调整大小在滚动退出

JS Rollover resizing in Chrome upon Rollover exit

本文关键字：滚动 退出 浏览器 Chrome JS 调整      更新时间：2023-09-26

我有一个在其他浏览器中工作的javascript翻转，一旦我使用Chrome来翻转它，退出时它会调整大小到一个荒谬的小尺寸。

任何想法?

<script type="text/javascript">
$('<img />',{ src: 'images/image.gif'});
$(function() {
    $("#logohover").hover(
        function() {
            $(this).attr("src", "images/image.gif");
        },
        function() {
            $(this).attr("src", "images/image.svg");
        }                         
    );                  
});


<img id="logohover" src="images/image.svg" width="50" height="50" />

我相信你已经在Webkit中发现了这个bug。现在基于Webkit的浏览器并不能100%支持svg的缩放。

你最好的选择是在<svg>标签本身设置width和height属性(加上viewbox和preserveAspectRatio，我不知道这是否必要)，然后使用百分比缩放<img>标签。

在SVG文件:

<svg
    ...
    width="50"
    height="50"
    preserveAspectRatio="xMinYMin meet"
    viewBox="0 0 50 50"
    ...
>

在HTML中:

<img id="logohover" src="images/image.svg" width="100%" height="100%" />
相关文章：