javascript - 更改图像/svg 以在网页上正确显示横向或纵向
问题描述
当我将窗口大小从横向更改为纵向时,页面无法正确刷新
如何更改页面的代码以显示正确大小的横向或纵向 svg
Landscape.svg 与 Portrait.svg 略有不同
请帮忙
<script>
if(window.innerHeight > window.innerWidth)
{
// Portrait
//alert ("Resized..P");
document.write( '<object id=\"svg-objectp\" data=\"car1-portrait.svg\" type=\"image/svg+xml\"></object>' );
document.getElementById("svg-objectp").style.width = "100%";
document.getElementById("svg-objectp").style.height = "auto";
}else{
// Landscape
//alert ("Resized..L");
document.write( '<object id=\"svg-objectl\" data=\"car1-landscape.svg\" type=\"image/svg+xml\"></object>' );
document.getElementById("svg-objectl").style.width = "100%";
document.getElementById("svg-objectl").style.height = "auto";
}
</script>
http://www.qurantour.com/car/index.html
解决方案
它不起作用,因为你的 javascript 代码只执行一次,你需要一个事件来使它工作:
<script>
window.onresize = function() {
if(window.innerHeight > window.innerWidth)
{
// Portrait
//alert ("Resized..P");
document.write( '<object id=\"svg-objectp\" data=\"car1-portrait.svg\"
type=\"image/svg+xml\"></object>' );
document.getElementById("svg-objectp").style.width = "100%";
document.getElementById("svg-objectp").style.height = "auto";
}else{
// Landscape
//alert ("Resized..L");
document.write( '<object id=\"svg-objectl\" data=\"car1-landscape.svg\"
type=\"image/svg+xml\"></object>' );
document.getElementById("svg-objectl").style.width = "100%";
document.getElementById("svg-objectl").style.height = "auto";
}
}
</script
推荐阅读
- mysql - 具有相似数据的表的数据库(SQL)。分配关系并映射 ERD
- python - 如何在 KivyMD 中制作图像列表(numpy 数组)?
- kernel - 如何知道在 NVIDIA GPU 上执行内核期间平均使用了多少 SM?
- kubernetes - 如何在 kubernetes 中轮换 admin.conf?
- math - 当与 IEEE 754 存在已知偏差时,如何确定性地划分浮点数?
- command-line-interface - Maven 在 CLI 输出中缺少 [INFO]
- python - 字典的docxtpl返回值错误
- javascript - 样式(tailwind/SCSS 样式表)未应用于 React 中动态插入的 HTML
- java - 已解决:无法将 com.sun.jersey.spi.container.servlet.ServletContainer 类强制转换为 jakarta.servlet.Servlet 类
- reactjs - 错误:元素类型无效:应为字符串(用于内置组件)