Image not shrinking when I try max width-CodePudding

Trying to have my image shrink with the page size. Tried a couple things either it doesn't work or it decides to fit another div I have which isn't related to this one

.top-page-image {
    position: relative;
    top: -8px;
    left: -8px;
    background-image: url(basictop.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    opacity: 0.8;
    max-width: 100%;
}

and the HTML

<div ></div>

CodePudding user response：

To make the whole image always visible regardless of the viewport's aspect ratio use contain instead of cover as the background-size.

Also set background-repeat to no-repeat and you may want to ensure it is centered.

Inevitably you will have space either at the sides or top/bottom if the aspect ratio of the viewport isn't the same as the aspect ratio of the image.

.top-page-image {
  position: relative;
  top: -8px;
  left: -8px;
  background-image: url(https://picsum.photos/id/1015/200/300);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100vh;
  width: 100vw;
  opacity: 0.8;
  max-width: 100%;
}

<div ></div>

CodePudding user response：

It is the same as you want. If it is not what you won't try to describe your problem clearly by using code attribute in the text editor

.top-page-image {
    position: relative;
    top: -8px;
    left: -8px;
    background-image: url(https://cdn.dribbble.com/uploads/601/original/ff7474bc9245e3ac5a25cff4f39b2707.png?1544835635);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    opacity: 0.8;
    max-width: 100%;
}

<div ></div>