你好，这是我的html代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html,body{
width:100%;
height:100%
}
#message{
margin-top: 32px;
text-align: center;
}
#picture{
margin-top: 15px;
text-align: center;
}
.span1{
font-size: 51px;
font-family: 微软雅黑;
font-weight: bold;
color: white;
margin-left: 50px;
margin-bottom: 20px;
}
.span2{
color: black;
font-size: 39px;
background-color: yellow;
margin-left: 50px;
padding: 8px;
margin-top: 20px;
}
.span3{
color: black;
font-size: 39px;
background-color: yellow;
padding: 8px;
margin-top: 20px;
margin-left: 12px;
}
.span4{
color:yellow;
background-color: gray;
font-size: 39px;
padding: 8px;
margin-top: 20px;
margin-left: 12px;
}
.span5{
color:yellow;
background-color: gray;
font-size: 39px;
padding: 8px;
margin-top: 20px;
margin-left: 12px;
}
#co{
margin-top: 24px;
}
#content{
margin-top: 24px;
font-size: 39px;
color: white;
}
.span6{
font-size: 24px;
color: white;
}
.span7{
font-size: 24px;
color: white;
}
#aa{
float:left;
}
#ab{
float:left;
margin-left: 15px;
}
#ac{
margin-top: 12px;
background-color: gray;
width: 92%;
padding-left: 34px;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
border-radius: 8px;
}
#bb{
margin-top: 12px;
background-color: gray;
width: 92%;
padding-left: 34px;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
border-radius: 8px;
}
#ad{
position: relative;
margin-top: 42px;
}
#ba{
position: relative;
margin-top: 42px;
}
#ae{
border-radius: 5px;
width: 80px;
float: right;
margin-right: 12px;
margin-top: 12px;
height:38px;
font-size: 18px;
background: orange;
}
#bc{
font-size: 36px;
color: white;
font-weight: bold;
}
#bd{
width: 92%;
}
#bf{
width: 100%;
height: 200px;
background-size: cover;
background: black no-repeat;
}
</style>
</head>
<body style="background-color: black">
<div id="picture" width="98%">
<image th:src="${det.path2}"></image>
</div>
<div id="message" width="98%">
<nobr class="span1" th:text="${det.cangpinname}"></nobr>
<div id="co">
<nobr class="span2" th:text="${det.type2}"></nobr>
<nobr class="span3">限量</nobr>
<nobr class="span4" th:text="${det.totalnum}"></nobr>
<nobr class="span5" th:text="' '+${det.sys}"></nobr><br>
</div>
<div id="content">
--------购买即可体验内容--------
</div>
</div>
<div id="ad">
<div id="ac">
<div id="aa">
<img th:src="${det.icon}" id="icons">
</div>
<div id="ab">
<nobr class="span6" th:text="${det.company}"></nobr></br>
<nobr class="span7" th:text="'作品 '+${num}"></nobr>
</div>
<button id="ae">+关注</button>
</div>
</div>
<div id="bf">
<div id="ba">
<div id="bb">
<div id="bc">作品故事</div>
<div id="bd">
<img th:src="${det.detail}" id="be">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var num=0;
window.onload=function () {
var myheight=$("#icons").height();
var picheight=$("#be").height();
$("#ac").height(myheight);
$("#bd").height(picheight);
}
$("#ae").click(function () {
num++;
if(num%2==1){
$("#ae").text("已关注");
$("#ae").css("background","gray");
}
if(num%2==0){
var message="确认取消关注此人吗？";
if(confirm(message)==true) {
$("#ae").text("+关注");
$("#ae").css("background", "orange");
return true;
}else{
num=1;
return false;
}
}
})
</script>
</body>
</html>
结果，我最大的问题是，我的一个id叫be的img标签，它的图片大小非常大，尤其是它的高，有一两万个px，导致html显示不全，其它的组件都显示不出来。
有没有什么办法，既能把这个大图片，尤其是这个高为一两万个px的大图片显示出来，而且要显示完全，完全显示出来，图片不要显示不全，不要把图片遮住，又要把其它组件也要显示出来，而且显示完全。
也就是这个html所有组件都要显示完全，而不是现在这样显示不全。
注意一下，不要让我选择去Photoshop缩小比例，并且切片。再重复一遍，不要在PS缩小比例，并且切片。因为这样太费时费力，开发效率低下，非常不好。
不用PS，就在HTML代码里进行编辑，应该怎么办呢？还有别的办法吗？
自适应屏幕，或者设置相对定位
上万像素的图片文件应该也比较大，不适合页面页面展示，你这个页面中用缩略图，也就是它的低分辨率图片，加个链接，点图片后显示上万像素的图片。
图片不变形等比例缩放呢，把它缩小
https://blog.csdn.net/Lpandeng/article/details/72520631
你可以不在当前页面直接展示，可以点击打开图片在另个页面展示
在你这个img标签里，加上width和height这两个属性，给这个图片设置高和宽