picture goes off screen on a smaller resolution?-CodePudding

very very new to coding but I'm mostly familiar with C and i ran into a problem while trying to set up my website, I have a computer and a laptop. my site looks just fine on my computer but when i swap to my laptop i notice my border/header goes off screen. as you can see in the code I've tried just about anything wrapping, taking away padding...! I want it to fit the screen and not go off screen for all resolutions (exluding on phones)

Sorry again if this isnt structured very well I'm very new to all of this but I'm having alot of fun!

Code: 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" >
</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; >

CodePudding user response：

You have so many wrong stuff:

there is no float: middle/absolute
you are missing style attribute in img, but also you can use in CSS instead
you are missing ; in some places
you are duplicating properties such as height

Here is a minimalist version of your code

body {
  margin: 0;
}

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

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

CodePudding user response：

Your code is messy and will not work as it is structured wrong. You should learn the very basics of HTML and CSS, that way you know how to apply styles in the first place.

Then I suggest to read about flexbox which should be more than enough to position your image correctly at diffrent screen resolutions.

Also worth to read about media queries in css.

You can find a lot of information about html and css at https://www.w3schools.com/

CodePudding user response：

Use Picture element for landscape and portrait devices with different width

<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">

or you can use img tag with 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">

one more thing, for image lazy loading

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

The decoding="async" attribute will tell the browser that it is OK for image decoding to be done at a later moment so that the browser can continue displaying content even if the images are not fully loaded.