last day (68 days later) » 

5:46 AM
0
Q: How to align Height and text in a Carousal in ASP.Net MVC 5 application

UnbreakableI am a beginner and trying to implement Twitter Bootstrap Carousal, and I have two requirements. Carousal/Image should be of the Height of the screen/browser (No Scrolling): No matter what the screen size is. Text in the Carousal should be in the center irrespective of the screen size. Below ...

 
user3559349
In the 2nd image, you have no scrollbar, but the bottom 1/3 of the image is not visible - its not clear why you want to chop of the image like that
 
Ohhh. I did not notice that. :-|. I thought setting the height rendered the images (and made it small). I did not realize that it got chopped off. :-|
@StephenMuecke: Is there any way I can tell the carousal/image to render till the browser's height and not exceed?
Something like loom.co
 
user3559349
First to explain what your seeing - your image is 100% wide (but in a container that is 100% wide but only 515px high. In the 2nd image, the actual image height is about 700px high so the bottom is chopped off. In the 3rd image you have reduced the width but the ratio stays the same so the image is now about 300px high. But you text is positioned relative to the container, not the image
 
user3559349
If you reduce the width of the browser window on that site, then image is cropped to the left and right (its not 100% as you want)
 
so, firstly, My aim is to center the text in the image. Firstly I want to achieve it.
Why I could not do it
because Image tag does not have some enlosing type of tags
<div> ADD the text tag here </div>
I cannot do something like above with image tag
 
user3559349
5:47 AM
Because your centering the text in the enclosing <div>, not the image
 
<Image> add a text here </Image> // I cannot do something like that right? that is why I am not sure how to set the text relative to an image.
just saying..
If somehow I can contain a text inside an image tag then I cann apply the absolute tag and all. :-|
 
user3559349
No, that is not valid html (and <img> cannot contain child elements)
 
Yes, you are right, that is why I am confused. and eventually ended up setting the absolute in refernnce to a parent <div> which is wrong as it seenms
 
user3559349
I'm not really sure what you want. You can have both the image and text centered inside a <div> and have the image scale (but some will be cropped unless you scale the window proportianally)
 
I want this behaviour
 
user3559349
5:51 AM
And you would want to make you images on the server fixed sizes to do that
 
Image should not need any scrolling and text should be in the center of the screen.
 
user3559349
You can achieve that, but it means that part of your image will be cropped top and bottom
 
I see. What if I alright with sacrificing some part of image.
loom.co this website carousal is so nice.
 
user3559349
If you want exactly what is in that site, then it would be best to study the html/css in that site.
 
Ohhh..
For starters, I want the image (no scroll) and text to be in the center.
 
user3559349
5:57 AM
But notice in that site that if you reduce the width of the browser window (and keep the height the same) then the image is cropped on the left and right
 
Yes. I just noticed it. It's getting cropped.
width wise..
So, their image is not <img class="responsive">
so they are not using the responsive class I suppose.
 
user3559349
No idea - I have not studied the css in that site.
 
But I am also okey with image getting cropped (Width wise).
 
user3559349
Then open that site and use your browser tools to study the html and css so you can duplicate it :)
 
I see..
 
user3559349
6:03 AM
If I get a chance later today, I create a simple fiddle showing what you could do.
 
Sure. thank you. till then I will attempt from my end.
People do not respect front end development. And I am finding front end development so much more painful. Anytime I try to do some hack, any simple hardcoding of any pixel and value. (deviating from bootstrap) and I can be almost certain that it will break something else. that is the reason, I want to extensively reply on Bootstrap classes.
Anyways I am more careful and try to not to deviate from bootstrap classes.
*rely
Bootstrap grid system is a life saver. :)
 
user3559349
I don't use it, so can't really comment :)
 
I see. Most of the stuffs that I use you don't use. for instance Identity, Bootstrap, EF, Sometime MySQL .. lol
But any tutorial I check, they teach these concepts only, like identity, bootstrap and EF. just saying..
Anyways when you get some time, kindly guide me on how to create a basic carousal with text in the center. :)
 
7:08 AM
@StephenMuecke:
I am able to get the image working
I added something like below:
.carousel-caption{
position: absolute;
top: 45%;
left: 0;
text-align: center;
width: 100%;
}

img {
max-width: 100%;
max-height: 90vh;
height: auto;
}
I don't know properly what "vh" means in CSS. But am able to achieve what I wanted.
I have deployed the code here. Referville.com
let me know if you think I will still face some issues. Thanks.
 
 
16 hours later…
user3559349
11:08 PM
@Unbreakable, vh is a relative size (to its container). Refer this article for more explanation (and note that its not supported in older browsers)
 
user3559349
The only issue I see with that is if you resize the browser window height, it distorts the image - not sure if that is acceptable to you or not.
 
user3559349
I did not get a chance to create a fiddle for you yet, but hopefully I will later today
 
user3559349
The other issue is that the text is not centered vertically as you resize because you have set the top of the text container to be 45%. It looks OK at full size, but appears closer to the bottom at smaller sizes (I suggest a better way to handle that in the fiddle)
 

  last day (68 days later) »