I have a .well.carousel and inside that I have two , one is the image and the other is the title text. I managed to auto-resize the image, but when I reduce the height of my well.carousel then the title text falls out of the .well.carousel. How do I get the image to resize such that the title text also stays enclosed within .well.carousel when my height is 150px (see Fiddle)????
1) The height of .well.carousel is 150px, and the title text falls outside the well. 2) When I change the height to 300px, then the title text fall inside the well (even though the image height is 1300px!!!). I dont understand this.
Maybe to explain my question better: I updated my FIddle - If I change the width for well.carousel from 400px to 100px you see the image to scale down. But if I keep the width at 400px but change only the height from 400px to 100px then nothing happens to the image. ANd here I want it to scale down too, same as when you change only the width.
State only one dimension to maintain intrinsic aspect ratio. The rub comes with having an image height that is at or near its container height. Then, you're creating an overflow case, and visible overflow is the default.
inside the main div
Hi,the main divs are used to mention it width and height,not used anothe inside images not mentioned height,width are used only percentage methods,remove to 400px make it 100%,separate div split in every classes inside divs.