在 div 中渲染 CSS 背景图像以实现响应式视图

Question

I need some help with one of the web-page I am working on. I have a div tag <div class="picContainer"></div> in my HTML page, and below is the CSS class for the same.

.picContainer{
        position: relative;
        background-image: url("Image.jpg");
        height: 74%;
        width: 30%;
        left: 5%;
        bottom: 2%;
        box-shadow: 0 0 8px 8px #FAF9F6 inset;
        background-size: cover;
}

This works perfectly fine when I view it on my laptop, but when tried to check the web-page on a Responsive Design View on firefox (ctrl-shift-m), the image gets cropped unlike how it's displayed on a laptop browser. Is there any way to view the image on a mobile browser as exactly how it's displayed on the regular laptop browser?

Answer 1

You can change the background-image size, position and other properties specifically for mobile/tablet view by declaring responsive @media queries.

@media screen and (max-width: 662px) {
  .picContainer{
        width: auto;
        background-size: contain;
  }
}

Note* ^ You can adjust, change or add other style properties to suit your needs more. The screen size can also be changed to the screen size and also min-width rather than max