Javascript 将带有图形/文本的图像调整/缩放至100%宽度/高度_Javascript_Jquery_Html_Css

Javascript 将带有图形/文本的图像调整/缩放至100%宽度/高度

javascript jquery html css

Javascript 将带有图形/文本的图像调整/缩放至100%宽度/高度,javascript,jquery,html,css,Javascript,Jquery,Html,Css,分辨率为1920x1080。该图像由图形团队创建，上面有大量文本/图形。我不确定CSS和/或JavaScript/jQuery是否有一种方式，当页面加载时，这个图像在加载时占据了100%的屏幕。然后用户可以向下滚动浏览页面，查看页面的其余内容现在我正在尝试类似的方法（使用引导）：墨西哥马尔佐市2016年第7届至第8届这不是很好，因为当视口大小开始接近1770px时，图像开始垂直高于窗口的高度，因此导致图像中的一些文本从页面上滚动我只想让图像适合加载时的屏幕大小（加载时页面高度的100

分辨率为1920x1080。该图像由图形团队创建，上面有大量文本/图形。我不确定CSS和/或JavaScript/jQuery是否有一种方式，当页面加载时，这个图像在加载时占据了100%的屏幕。然后用户可以向下滚动浏览页面，查看页面的其余内容

现在我正在尝试类似的方法（使用引导）：


墨西哥马尔佐市2016年第7届至第8届

这不是很好，因为当视口大小开始接近1770px时，图像开始垂直高于窗口的高度，因此导致图像中的一些文本从页面上滚动

我只想让图像适合加载时的屏幕大小（加载时页面高度的100%）。我尝试了多种涉及jQuery和CSS的解决方案，但似乎都不符合这些基本要求。有可能吗

编辑：这里是另一次尝试

#hero {
    background-image: url(http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg);
    background-size: cover;
    position: relative;
    height: 100vh;
}


<wrapper id="wrapper">
    <div id="hero"></div>
</wrapper>

#hero{
  background-image:url(http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg);
  background-size:cover;
  position:relative;
}

<wrapper id="wrapper">
    <div id="hero"></div>
</wrapper>

$(window).scroll(function (e) {
    handleScroll();
});

function fullscreen() {
    $('#hero').css({
        width: $(window).width(),
        height: $(window).height()
    });
}

fullscreen();

// Run the function in case of window resize
$(window).resize(function () {
    fullscreen();
});

英雄{ 背景图片：url(http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg); 背景尺寸：封面；位置：相对位置；高度：100vh； } 此解决方案在图像缩小时不适合屏幕

编辑2：在此处尝试jQuery

#hero {
    background-image: url(http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg);
    background-size: cover;
    position: relative;
    height: 100vh;
}


<wrapper id="wrapper">
    <div id="hero"></div>
</wrapper>

#hero{
  background-image:url(http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg);
  background-size:cover;
  position:relative;
}

<wrapper id="wrapper">
    <div id="hero"></div>
</wrapper>

$(window).scroll(function (e) {
    handleScroll();
});

function fullscreen() {
    $('#hero').css({
        width: $(window).width(),
        height: $(window).height()
    });
}

fullscreen();

// Run the function in case of window resize
$(window).resize(function () {
    fullscreen();
});

英雄{ 背景图片：url(http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg); 背景尺寸：封面；位置：相对位置； } $（窗口）。滚动（功能（e）{ handleScroll（）； }); 函数全屏（）{ $（“#英雄”）.css({ 宽度：$（窗口）.width（），高度：$（窗口）。高度（） }); } 全屏（）； //如果需要调整窗口大小，请运行该功能 $（窗口）。调整大小（函数（）{ 全屏（）； });

产生与CSS版本相同的结果

这对你有用吗。。。通过添加底部填充，它可以保持其纵横比

html，正文{margin:0；}
#英雄{
背景图片：url(http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg);
背景尺寸：包含；
背景重复：无重复；
宽度：100%；
填充底部：56.25%；/*1080/1920=0.5625*/
}


布拉布拉布拉

布拉布拉布拉

布拉布拉布拉

布拉布拉布拉

布拉布拉布拉

布拉布拉布拉

布拉布拉布拉

试试这个

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
       html,body{
        padding: 0;
        margin: 0;
        height: 100%;
       }
    img{
        height: 100%;
        width: 100%;
    }
</style>
</head>
<body>
<img src="http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg" alt="Hero">
<div>Other</div>
<div>Other</div>
<div>Other</div>
</body>
</html>


文件
html，正文{
填充：0；
保证金：0；
身高：100%；
}
img{
身高：100%；
宽度：100%；
}
其他
其他
其他

我想我已经解决了你的问题？

img{
宽度：100%；
高度：自动；
}

正如评论所指出的，这一问题的真正答案是，当屏幕大小改变时，在保持图像的纵横比和可读性的同时，没有办法做到这一点

解决方案是不要拍摄一个包含所有文本/图形的巨大图像并尝试使用它，而是将其分解为多个组件，并在页面上使用html/css相应地将它们拼接在一起。这样，他们可以随着屏幕大小的变化而移动/移动，同时仍然保持消息的清晰。

您可以发布您的尝试，特别是CSS尝试吗？@Mikey添加了CSS和jQuery尝试。以下两个我认为你缺少一些背景图像的css规则：你尝试过这个：@Mikey这是一个完整的页面背景图像。我正在寻找全屏图像。。。就像一个英雄图像，在加载时占据100%的宽度/高度，但不会填充整个页面的背景。有一个我正在寻找的例子，但请注意他们的图片上没有任何文字。。。当它变小时，图像中的一些内容就会消失。。。所以我想这不是我想要的，也可能不可能。“图像是由一个图形团队创建的”…这似乎是问题的很大一部分。该图像中的大多数文本不应是图像的一部分，而应设置为HTML中的实际文本内容。不，这会导致图像拉伸超过屏幕宽度，并切掉图像的底部。您在1920 x 1080分辨率上测试它的分辨率这似乎在我的1920 x 1080和1366 x 768显示器上工作正常。。。我将进一步调查，这很接近，但图像的底部没有显示在屏幕上（蓝色条上有文本）。@Mariocach我可以阅读“ESCANEO 3D…”和其他内容。你是说你需要滚动才能看到它吗？我不能以1920 x 1080的分辨率看到它。我必须滚动才能看到它。“我正试图找出如何在页面加载时将其保持在屏幕上。@Mariocach添加了一个2:nd示例。。。这对你有帮助吗？@Mariocach我的回答对你有帮助吗？还是你需要更多的帮助？