在全屏幕上的img標籤內顯示SVG

我想在全屏瀏覽器上顯示我的SVG圖像在img標籤中。但圖像的底部被截斷，所以用戶看不到它。在全屏幕上的img標籤內顯示SVG

這裏是我的代碼：

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
#svgPhoto { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
}

<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
</head> 
 

 
<body> 
 
    <img id="svgPhoto" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/aa.svg"> 
 
</body>

https://jsfiddle.net/f6shkajk/

來源

2017-05-16 andrzej541

「但圖像的按鈕，」哪裏是按鈕？請發佈工作代碼或撥打 – LKG

底部。我的錯。這裏是我隨機svg圖像的小提琴。 https://jsfiddle.net/f6shkajk/ – andrzej541

檢查我的答案希望它的工作。 – LKG

你只需要添加height:100vh;到#svgPhoto

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
#svgPhoto { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100vh; 
 
}

<img id="svgPhoto" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/aa.svg">

來源

2017-05-16 12:05:37 LKG

您可以將max-height: 100%;規則添加到您的CSS。例如，嘗試運行下面的代碼段。

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
#svgPhoto { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    max-height: 100%; 
 
}

<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
</head> 
 

 
<body> 
 
    <img id="svgPhoto" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/aa.svg"> 
 
</body>

來源

2017-05-16 12:16:18 Alexander

在全屏幕上的img標籤內顯示SVG

回答

相關問題