html - Make division image responsive -

I am stuck in drawing a picture within a square background. Website.

This will be very useful if you can help me, then I am using Bootstrap and Neo slider. The CSS and the HTML that I am using for the slider are given below.

CSS:

  .slider-wrapper {width: 310px; Height: 650px; Background: URL ("Picture / iPhone Page") Center Center; Background size: Cover; } .nivoSlider {status: relative; Width: 290px; Height: 512px; Top: 60px; Bottom: 65px; Left: 23px; Correct: 24px; Hidden flurry; } .nivoSlider img {status: Completed; Top: 0px; Left: 0px; Width: 100%; Height: 100%}  

html:

  & lt; Div class = "slider-wrapper" & gt; & Lt; Div id = "slider" class = "nivoSlider" & gt; & Lt; Img src = "" / & gt; & Lt; Img src = "" / & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

And a screenshot of the above code (with additional HTML) on a laptop:

Here's a website. Try to see it below 380px width, when the problem arises. I should see the image properly in less than 380px

I want all the images to become smaller and be in the center and properly combine under 380 pixels but I get this:

.

If you can help me, I am grateful It's difficult to debug without looking at the whole picture, but I think you need to use it. I like the code given below, max-width This will prevent your devices / images from being larger than you, but if necessary, they will be allowed to shrink. Maximum-height: 650px; Background: URL ("Picture / iPhone Page") Center Center; Background size: Cover; } .nivoSlider {status: relative; Max-width: 290px; Maximum height: 512px; Top: 60px; Bottom: 65px; Left: 23px; Correct: 24px; Hidden flurry; } .nivoSlider img {status: Completed; Top: 0px; Left: 0px; Max-width: 100%; Height: auto; }