3 replies [Last post]
ronbon
ronbon's picture
Offline
newbie
Last seen: 4 years 31 weeks ago
Timezone: GMT+2
Joined: 2015-04-09
Posts: 7
Points: 10

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)????

http://jsfiddle.net/rabas007/vy5re648/68/

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.

ronbon
ronbon's picture
Offline
newbie
Last seen: 4 years 31 weeks ago
Timezone: GMT+2
Joined: 2015-04-09
Posts: 7
Points: 10

Updated Fiddle

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 44 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Drop max-height

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.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 4 years 7 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

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.