I want to make a div vertically responsive just like <img src="img.jpg" style="max-width:100%; height:auto;">, so that the image does not lose its shape in any condition and height changes according to the re-sizing browser.. similarly if i make a slider div with width 100% and initially max-height 600px. So I want it's to reduce height like it's width. If I use vh method then it does not give good result in mobile view. A good example of a working slider is on the following link.
Asked
Active
Viewed 41 times
0
Ragul Parani
- 621
- 7
- 22
M. Ibrar
- 105
- 1
- 8
-
Do you intend to have the div maintaining aspect ratio based on its content or background image? – Martin Mar 06 '17 at 07:41
-
I think,,...,,......... you are right.. – M. Ibrar Mar 06 '17 at 07:44
-
Possible duplicate http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css – PhilS Mar 06 '17 at 08:16
1 Answers
0
use css instead of <img />
.image{
background-image : url(<image_url>);
background-size : cover;
background-position : center;
background-repeat : no-repeat;
}
-
inspecting the element in the "working slider" that you gave, is showing the exact solution that I wrote... – Mar 06 '17 at 08:15