Question

我想使用svg图像作为背景图像，我想显示整个图像（没有裁剪）并将图像拉伸到容器div 的100％高度和宽度，而保持原始高宽比。

我希望这会奏效：

1.png (10x10px)
2.png (15x20px)
3.png (20x20px)

但它没有，高度是100％，但宽度不是，它保持原始的宽高比。

如果我使用png图像而不是svg它确实有用。

有没有办法用svg做到这一点？

Answer 1

解决方案：

在文本编辑器中打开svg文件并添加以下属性：

<svg preserveAspectRatio="none"

Answer 2

使用

height:100% ;width:100%; background-size:contain;

保持背景宽高比。

Answer 3

$(document).ready(function() {
    $(".vgQues img").hover(function() {
        var imgAlt = $(this).prop('alt');
        $(this).closest('.vgQues').find(".vegQuesTitle").text(imgAlt).show("fade");

    }, function() {
        $(this).closest('.vgQues').find(".vegQuesTitle").hide("");
    });
});

试试吧。我希望这会对你有所帮助

拉伸svg背景而不保持纵横比

3 个答案: