How to make a div image responsive

Question

I tried with

.slider {
    background: url(../images/slid1.jpg) no-repeat 0px 0px;
    background-size: cover;
max-width: 100%;
    min-height:800px;
 
}
.slider1 {
    background: url(../images/slid2.jpg) no-repeat 0px 0px;
    background-size: cover;
}
.slider2 {
    background: url(../images/slid3.jpg) no-repeat 0px 0px;
    background-size: cover;
}

i want to know how to make this div image responsive?

i want to know how to make a div background image in which i use this css code? — sunit shakya, Dec 13 '16 at 07:53
If you apply those classes to block-level elements like `div`'s, it is already responsive. What is the problem - and related code - exactly? — jeroen, Dec 13 '16 at 07:54
i m using it in this way but the background image didn't get responsvie according to screen size...it crops — sunit shakya, Dec 13 '16 at 07:57
So? Responsive and cropping are not mutually exclusive. It's still responsive. — jeroen, Dec 13 '16 at 07:59
Possible duplicate of [Grid of responsive squares](http://stackoverflow.com/questions/20456694/grid-of-responsive-squares) — jacefarm, Dec 13 '16 at 08:02
@sunitshakya: Because slder class has min-height:800px; and while browser resizing this class height is constant and element (that has slider class) not resizing according to image proportion. That's why you are not able to see full image on every resolution. — Tanmay Vats, Dec 13 '16 at 10:03

score -1 · Answer 1 · answered Dec 13 '16 at 08:38

In your example css you are using background-size:cover. This property causes the image to scale to the smallest size in where both the width and height of the image are at least the size of the container. background-size:contain might be give the behaviour you want. It is the opposite of cover, in that it tries to scale the image to be as big as possible in the allocated space without clipping.

.img
{
  background-image:url(https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d);
  background-repeat:no-repeat;
  background-size:contain;
  min-height:400px;
  max-width:50%;
}

<div class="img">
</div>

How to make a div image responsive

Great Shakya Muni Buddha

1 Answers1