twitter-bootstrap carousel css image resizing

Question

I am trying the carousel example here http://getbootstrap.com/javascript/#carousel with image of 1200x300 . It looks fine in large screen with width more than 1200. However when I reduce the browser width the image in the carousel decrease and it looks thin.

Is there any trick to have kind of minimum height applied to the image within carousel.

Answer 1

您可以使用CSS媒体查询来实现所需的功能。

Answer 2

Basically what I think is happening as I don't have any code to look at is that you have responsive bootstrap on which you need to turn off otherwise bootstrap cleverly resizes the objects on the page.

Also I noticed that if you resize the image http://placehold.it/1200x300 then it shrinks though that might not affect it at all

Answer 3

If you set max-width: 100%; height: auto; max-width: 100%; height: auto; on the img , it will retain it's aspect ratio (ie remain the correct shape) no matter how narrow you make it.