Menu
I'd like the carousel to scale proportionally the background image
in this question Bootstrap Carousel Image does not scale proportionately it is suggested to leave the image explicit dimension but I can't understand what it means.
750
1 method is to use a div with a specified size, use css to set the image as a background image for the div and set background-size to fit, contain or cover. 2 A better approach is to use an image manipulation program like photoshop, i personally use an online application called https://www.photopea.com.
You can do this in the application, Step 2, Skins dialog, Style tab. The second way is to define a background image for the parent div of the carousel in your webpage HTML code: 1. You create a div with the specified size and setup a background image for this div.
You have to set the height of the outer div with id="myCarousel" to 100%. So add it in the css file or in the html file. Too use the full height you need to set the height of the <html> and <body> to 100% (often the first two classes in a css file). Save this answer.
Set this in your HTML
For every img element in your carousel, you can set the width property to 100% like this (although you shouldn't need to if the natural resolution is larger than the control):
<img src="http://i.imgur.com/OEdBxVD.jpg" width='100%'>
width or height set to any pixel sizesSince the image is going to go full screen, you should try to get your hands on a resolution that will naturally try to take up the full width available. When the browser has to scale the image up, it will cause artifacts.
188
What they mean is to leave off the width=px and height=px from the image (or image styles). You can set width="100%" and leave off the height. The browser will scale proportionally for you.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
