Flexslider slide with centered image in fixed aspect ratio div - javascript

I am using a theme which employs the flexheader to show banner images. Since it's a theme, I cannot really modify the options of the slide show directly and am trying to work around it.
What I want is height of the banner to stay the same. 16:9 images use the entire banner space, but lower aspect-ratio images are centered with solid background color around them.
So I am trying to pass a particularly styled div as list item (slide): I create 16:9 div and solid gray background.
Here is an example, which mostly works, but the slide with the logo is stretched. How can I keep the image aspect ratio and keep the image in the horizontal center? Or is there a much easier way to achieve what I want?

To achieve what you want, you need to remove the height: 100% !important from the image element, because that piece of code is stretching it.
.flexslider .slides img {
width: auto;
}
But the image wont be filling the whole slider area, as there will be a gap on both sides, but it wont be stretched. To make the images fill the whole slide, you would need to upload the image in the correct size. Hope you understood what I've meant.

Related

How would I show an image, with automatic container 'framing', but with some hidden overage?

Using react/jsx.
I know that backgroundSize: "cover" will use the smallest extent of an image for resizing while keeping aspect ratio. So a wide image will use it's height to fit a portrait/phone-shaped space.
transform: "scale(1.5)"increases the size of the image along with the constraints of it's container. Translation (movement) animations based on the above example can only move left right as the top and bottom are pinned to the container.
What I need is the cover effect of calulating image size based on it's container, but with the image larger than the container. My images vary in size and are being read into an array by react. I need it to automatically resize these images to the resulting size with the end goal of being able to use various #keyframe animated movement on the images.
How would I tell css to "reduce the image to cover the container, maintaining aspect ratio, but leave it an arbitrary 25% oversize"?
Alternatively, could I do something here with JS/React?
I have some flexibility, so I can add/change elements or components with styles if I need to.

Bootstrap 3 carousel white background underneath slide when sliding

I am using the latest version of Bootstrap on my website. Every time the carousel slides, a white background appears below the slide image.
Where is this coming from and how do I get rid of it? Images are of different sizes.
May its the default background color of the carousel or something underneath .
To find the origin of that , try overriding the background color of carousel or body or html or may be the container underneath it with a different background color .
To avoid that change height of images to
height:100% ; or height:"100vh";
if the above doesn't work also set height for the html/body element
You need to set the height of the image to 100% so that it covers the entire height of the carousel container. To do this you will have to set all of the images parent containers to 100% also you will have to give your .carousel a specific height. So you will have to set the.carousel to something like height: 500px and then set the .carousel-inner, the .item and the .item img all to height: 100%;. If you want to preserve the resolution of the image then you can get rid of the image tag and give each slide another class eg. .slide-one, .slide-two, .slide-three ect. Then you can give each of these classes a background image and set it to cover but you will still have to set the carousel height to a certain height and then set .carousel-inner and .item to height: 100%. Here is an example fiddle that I show people to make their carousels truely responsive. It uses padding bottom to the .carousel-item and then you set this to a percentage. Then mess with this padding-bottom percentage to get your desired height. And then set each item to have a background image. Here is the fiddle that you may want to look at
Carousel Fiddle
But to get your carousel to work you need to do like I stated earlier and set the image and it's parents containers height to 100%. If you don't want to mess with any of that you can resize your images to all be the same size with many of the webs image resizers you can just google resize image to find one.
Hopefully this all helps

Bootstrap thumbnail alignment (horizontal)

I added the thumbnail class to my thumbnails div, which had the intended effect. However, some of the thumbnails were smaller in size than the others. I wanted them to have the same height so I gave each thumbnail a height of 210px, thinking that would now appear the same all aligned horizontally in a line. However, setting the height had the strange effect of making the smaller thumbnails jut out of the alignment by extending below. I tried solving this by setting the css property of top: 0px; on each thumbnail, but that did not make any difference. How can I get all my thumbnails to be the same height AND be perfectly aligned horizontally?
The problem was eventually solved by adding style element overflow: hidden; to the thumbnail class.
If you are using bootstrap, did you try putting each image in its own div class for columns? If you are at all thinking of responsive design (which is why one typically uses bootstrap) this might help you get them to align extremely quickly and easily.
http://getbootstrap.com/2.3.2/scaffolding.html, take a look at the live fluid grid part.

How to make an image : enlarge when small, keep center when large

I have a image container(a div) with a set width and height.
now I got an image url from the backend and I need to put it in the container.
when the image is smaller than the container, I need to enlarge it to fullfill the container
when the image is bigger than the container, I need to center it in the container.
could this be done in pure CSS? or do I need to use JavaScript to do something?
You will need a mixture of css and javascript, here's an example I've created for you:
http://jsfiddle.net/7fUxw/1/
What about min-width:100px on the image, where the div is a width of 100px.

Slideshow in Javascript when the image changed is the background image

The client wants to have a simple slideshow with a little twist: he wants the menu to be on top of the image being changed.
what would be the way to achieve this using css and javascript?
Don't use a background image, just put the menu in a division and position it absolutely on the top of the image somewhere. You can't resize background images and if the images are bigger than the client's visible area they will be cut off.
As you normally do. The order of the image and menu is important. If the menu is after the image then you are ok. If you can't/won't change the order then you'll have to use the css z-index property.

Categories