图片在较小的分辨率下离开屏幕?

Question

非常非常新的编码，但我大多熟悉C，我遇到了一个问题，而试图建立我的网站，我有一台电脑和一台笔记本电脑。我的网站在我的电脑上看起来很好，但是当我换到我的笔记本电脑时，我注意到我的边框/标题从屏幕上消失了。正如你可以在代码中看到的，我已经尝试了几乎任何包装，拿走填充…!我想让它适合屏幕，而不是离开屏幕的所有分辨率(不包括手机)

再次抱歉，如果这不是结构很好，我是非常新的这一切，但我有很多乐趣!

代码:CSS

#maincontainer2
{
position:relative;
box-sizing: border-box;
background-repeat:no-repeat;
height: 100%;
width: 100%;
left:0;top:0;
max-width: 100%
max-height: 100%;
float:middle
}
body 
{
height: 100%;
width: 100%;
display: table;
margin: auto;
box-sizing: border-box
margin: 0;
}
HTML
<div id="maincontainer2" class="container-fluid">
</div>
<img src="https://media.discordapp.net/attachments/794994238038605904/998116976310353930/the_bg.png" 
object-fit: contain; position: absolute; float:absolute; box-sizing: border-box; 
width:100%; height:100%; height: auto; max-width: 100%; left:0; right:0; >

Answer 1

你有这么多错误的东西:

• 没有float: middle/absolute
• 你在img中缺少style属性，但你也可以在CSS中使用
• 你在一些地方缺少;
• 您正在复制height
等属性

这是你的代码的一个极简版本

body {
margin: 0;
}
.image {
object-fit: cover;
width: 100%;
height: 100%;
}

<div id="maincontainer2" class="container-fluid">
<img class="image" src="https://media.discordapp.net/attachments/794994238038605904/998116976310353930/the_bg.png">
</div>

Answer 2

为不同宽度的横向和纵向设备使用Picture元素

<picture>
<source
media="(orientation: landscape)"
srcset="image-small.png 320w,
image-medium.png 800w,
image-large.png 1200w"
sizes="(min-width: 60rem) 80vw,
(min-width: 40rem) 90vw,
100vw">
<source
media="(orientation: portrait)"
srcset="image-small-portrait.png 160w,
image-medium-portrait.png 400w,
image-large-portrait.png 600w"
sizes="(min-width: 60rem) 80vw,
(min-width: 40rem) 90vw,
100vw">
<img src="image-small.png" alt="Image description">

或者你可以使用srcset

<img src="image-small.png"
srcset="image-small.png 320w, image-medium.png 800w, image-large.png 1200w"
sizes="(min-width: 60rem) 80vw,
(min-width: 40rem) 90vw,
100vw"
alt="Image description">

对于图像延迟加载

<img src="very_and_expensive_img_to_load" decoding="async" />

解码="async"属性将告诉浏览器可以稍后再进行图像解码，这样即使图像没有完全加载，浏览器也可以继续显示内容。