I have an image carousel with images in it, and I can't figure out why the images won't centre within it. Here's what I currently have for my CSS as it relates to the content of the carousel:
.blueimp-gallery { width: 90%; height: 90%; margin-left: auto; margin-right: auto; align: center;}
Normally when the height and width are set to 100% the images fill up the carousel all the way and are centred within it. However I don't want them to be 100%, and when I change them to a smaller amount they align to the top left of the carousel instead of the middle. How can I fix this?
To be certain I would need more code, but it seems you're applying your CSS to the gallery, not the images in it...
if you change .blueimp-gallery to .blueimp-gallery img it should center the images
Related
working with a simple bootstrap Carousel for a class assignment. I've reduced the max-height of the images to 400px but as a result the top of the images are the only things being displayed. I've tried messing with the margins a bit on the image and was about to just crop the images so they fit but I figured I'd ask the community first.
How does one recalibrate where the images on a boostrap decide to center the image? I just want to shit the image up so the middle of the image is what is being displayed on the now resized carousel?
I think you maybe be looking for the object-fit: contain css property
When specified an image will be show at is maximum size that still mantains
aspect ratio.
https://www.w3schools.com/css/css3_object-fit.asp
.carousel-item {
max-height: 200px;
}
.carousel-item img {
height: 200px;
width: 100%;
object-fit: contain;
}
I have a website that I am trying to make behave decently when a browser window is resized. For instance, I want the banner image to be resized when someone shrinks the browser window. The site is http://www.pfp-consortium.org
The banner on top is specified in CSS as
#rt-showcase .rt-container {
border-bottom: 0px none;
height: 200px;
width: 1200px;
background: transparent url("/images/headerimgs/topimage.jpg") no-repeat scroll center center;
}
So I know the fixed width and height has to go. In reading numerous threads on this site, I tried various recommended approaches. I tried setting width (and max-width) to 100% and height to auto, which seems to be the accepted approach. Strangely, whenever I make height anything other than a px value, the image disappears!
Maybe some other aspect of the site is preventing the resizing happening as I would expect?
Any insights appreciated.
The problem is that .rt-container is empty so when the height is auto (or anything except px) the div defaults to 0 height (empty). If you take that image out of the background image and make it an <img> tag then you can apply width: 100%; height: auto; display: block; and it will scale with the window correctly.
My css:
a.red, object, embed {
display: inline-block;
background-image:url(/bowties/red.png);
background-size: contain;
background-repeat:no-repeat;
width: 100%;
height: 30%;
}
My Html:
<a class="red"/>
What I want to do is have the image automatically sized right so I can use these as menu items. One on top of the next and so on. If I kept them in an image tag wrapped in an anchor then "height: auto;" works. I want to turn them into sprites which is why I am pulling it out, but I would like these to scale based on the size of the screen. Thanks in advance!
From my understanding this is not possible.
I found a resource that simply had me add a relatively sized 'filler' image. A blank placeholder that caused the div to get a height and width, then be able to be re-sized on the container re-size. Slight bit of a hack, but worked.
I'm working on a responsive site (using Foundation 3) that uses brush strokes as button backgrounds. I'm having a hard time with 1) getting the images to scale with the rest of the responsive design 2) making the full size background image show no matter how big the container div is.
A couple screen shots:
When the browser is full width-
http://www.screencast.com/t/3Lu86fhnsZkk (I'm a new user can't post images)
When the browser scales in width-
http://www.screencast.com/t/3Lu86fhnsZkk
CSS:
h4.reserve{
background: url(../images/reserve_spot_bkg.png) no-repeat;
width: 290px;
height: 63px;
padding-top: 20px;
margin: 0 0 0 -10px;}
What's the better way to have background images that 1)show full size even though the content is small and 2) stay responsive?
For making the background fit to the container it belongs to, set the background-size to cover
h4.reserve {
background: url(../images/reserve_spot_bkg.png) no-repeat;
background-size: cover;
width: 60%;
min-width: 100px;
}
http://www.w3schools.com/cssref/css3_pr_background-size.asp
The Image will resize while you resize the container element, so make the container element responsive using percentage values for width/height or use media queries.
Use min-width and max-width to prevent the element from getting too small or wide.
I found some great help on this site that helped me tile an image on either side of my fixed header. One issue I am having is the scroll bar on the right is being covered by the tiled image and becoming inaccessible. I am sure it is something simple but I am at a loss at the moment. You can view an example here: http://www.jzandecki.com/example
You'll need to rebuild your header from scratch. First of all create a div (this will be your header container), name it with id let's say "header". Add as a background your tiled black image. The position of that div should be FIXED and not ABSOLUTE.
position: fixed;
background: url("../images/example_top.jpg") repeat scroll 0 0 transparent;
background-repeat: repeat-x;
height: 178px;
width: 100%;
In your header div add another div having for width size the width of your power plant image. Set the css of this div to margin: auto (to center it in the screen).
margin: auto;
This should do the job.
If this works you should have the same view you had before but your scroll bar will be on top of your header and not hidden.
Edit:
By the way I saw your body is 900 px and sticks on the left of the screen. I recommend you to have the following attribute for your body:
margin: 0;
padding: 0;
The body should occupy the whole page.
If you want a 900 px wrapper block for your content add a div AFTER your header div (described above). This new div should have the following css attributes:
width: 900px;
margin: auto; //this centers your div in the middle of your screen
//Other styles that have nothing to do with positioning
Good luck.