Fix the position of image in html-CodePudding

I have created an html document. Inside this I've imported an image under a paragraph. But whenever I change the resize my browser. The image disappears by moving below the page.

The image is given inside a card.

.Card{
  border:none;
  font-family: 'NCS Radhiumz';
  border-radius: 15px;
  background-color: #000000;
  width:90%;
  height: 85%;
  margin-left: 80px;
  padding-left: 5%;
  padding-right: 5%;

I just want everything on the page to resize without disappearing from the page. I'm very new to coding. Anybody know how to fix it?

CodePudding user response：

What you're most likely missing is some styling on your image element. Try this in your css file:

img {
  width: 100%;
  object-fit: contain;
}

You can experiment with different ways to fit the image in your component. Check out these docs for some options.

CodePudding user response：

you're asking for responsive web design. You can achieve that by implementing CSS Media Query.

Learning source: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

CodePudding user response：

If you want your image to be in one place and don't move you can do that with position style in css like so:

.element {
  position: fixed;
}

.element {
  position: absolute;
}

But image moving below is normal since the browser can't fit the image besides the text.

If you want your image to behave differently you can do that by using @media query and manually write how the app should change based on screen width/height. But generally the best way to do so is using flex-box or grid, since the browser automatically does object moving for you.