Nuka slider adding 100% width stretches my images in react - javascript

I have a carousel with six images that runs infinite using Nuka Carousel
And when i see the images on the page they are stretched on the width. After looking in the console i found that nuka slider class adds 100% width to images and disabling it fixes the images.
.slider-slide > img {
width: 100%;
display: block;
}
is there a way to disable the width so the images won't be stretched?

My solution is as follows. The images don't stretch in full screen.
img.your-class-name {
background-repeat: no-repeat;
min-width: 100%;
width: 100%;
height: 100%;
}

I had this for ages too. Really frustrating. I was using emotion and CSS Grid. So in my case I first made sure I got the demo working by doing this:
Make a component for the slider
Set up the demo code inside the component as is
convert CSS - In my case: import { css } from "react-emotion", then convert the style={{ tags into className={css`
add a view-port based limit using the %vw; in my case I have a 5% gutter down the side so I limited to 90vw (90% of viewport), as follows
<div className={css`
width: 90vw;
margin: auto;
`}>
<Carousel>
// demo code
</Carousel>
Depending on your libs and surrounding css, you will need to vary this approach. I am basically making sure the CSS is all processed at the same time, by the same tool, so it's not compiled in some weird order. Then I'm limiting the div width that contains the carousel. It's twitchy AF - I broke it several times by adding unrelated CSS - and I'm using emotion which prefixes CSS, so it made no sense but hey, that's the joy of CSS.

Related

Slider has no height and doesn't display unless I set hardcoded height

I'm trying to create a slider component from zeto to use on my project. The problem I'm currently facing is that the slider has 0 height unless I set hardcoded height like height: 50rem;. I can't spot what's cauising this or why.
You can find working code snippet here: https://jsfiddle.net/fj640arc/1/
You should remove height: 50rem; on .slider CSS class to see how it looks. I shouldn't hardcode an height for sliders.
Also any help help would be appreciated on responsive images for this slider. How can I improve this slider images to be able to fit on the slider properly and not break it?
Thanks!
If you are looking to add responsive height sizing, try changing the height to use vh instead of rem. For example, you could use:
.slider {
max-width: 114rem;
height: 50vh;
position: relative;
box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.15);
}
vh stands for viewport height, and setting it at 50 will ensure your slider will always be at 50% of the height of the screen regardless of the particular dimensions of the screen.
If you are looking to implement responsive design further, you will need to consider various screen sizes.
Meta Tags
Including a meta tag will help you set the zoom level and adjust depending on the screen dimensions. The following meta tag is probably what you are looking for, but read more online:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Grid Layout and Flexbox
Next, I would look into how you lay out your screen. Two very great ways of doing this is by implementing grid layout or flex-box. W3Schools provides great information on these two techniques.
Media Queries
Finally, you can also include media queries to use certain CSS code depending on the screen dimensions. For example, this CSS code will run if the browser is 600px or smaller:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
You can use vh, em, and rem in your media queries as well if pixels are not what you would like to compare against.
When you position items, you take them out of the document flow.
You have to remove the
position: relative; declaration in the slider__item-list

centering image overlaying another with xray effect

The issue I’m having here is with the x-ray image behind the one in the front. They do not line up. It only does when i stretch the browser out to 1920px. Anything smaller than that causes it to misalign. Note that I purposely set the image to be at 100% width which I know is not responsive.
I want to keep the effect of the image getting cut off on the right and left of the browser. Ideally I'd like both images to be centered and aligned when I decrease the size of the browser.
Here is the Github link:
https://gist.github.com/siravani/71b8d447acaca8b34acfcab82af58c06
If you added a fiddle that would have been a lot easier but all you need to do is add background-size:cover to #flesh css rule
html, body, #flesh {
position: relative;
margin: 0;
height: auto;
max-width: 100%;
background: url("http://www2.yapstone.com/l/109192/2017-04-04/4c61s2/109192/37539/buildings.jpg") no-repeat;
background-position: center;
background-size:cover;
}
this way your background image will fit in container and will match with the original image.
Here is a working fiddle https://jsfiddle.net/w2jjaLn5/

Bootstrap site not being responsive on mobile

Update: I've changed over the % and made px values max-width but it's still not being responsive with images, nor is the mobile menu working.. (link to website)
I am working on a site using Bootstrap, and for some reason it is not being responsive. I have the viewport set to meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
Bootstrap.css first, then the theme.css.
I see a couple of issues:
1) Your col-lg-1 and col-lg-10 classes need to be immediately inside a div with row class, that is inside container class. Do not wrap them in modal-body either - this is stopping the responsive grid styles from working properly.
2) You should probably add some col-md-** and col-sm-** classes to your columns as well, to give better control of proportion at medium and small size, instead of just specifying the large size.
3) Take all fixed widths off your classes inside container.
If you want to make a responsive website you should stop using fixed widths. For example on your website, you have a class named ".contacts" and the image "Mazars Messenger"(add a class here and use it instead of img from my code). Try to set these properties to it and see what happens:
.contacts{
max-width: 800px;
width: 100%;
}
/*here you add your own class instead of img to affect only the image with that class*/
img{
max-width: 800px;
height: auto;
width: 100%;
}
.container {
max-width: 970px;
width: 100%;
}
And you have the borders as images under every article. You need to modify the code for those too, and then your site should be responsive.
You need to do this for your entire website. Good luck.
You are forcing some width values in pixels, for example here:
.contacts {
width: 800px;
display: block;
}
If you want it to be responsive you need to set values in percentage like so:
.contacts {
max-width: 800px;
width: 100%;
display: block;
}

Center and crop img tag

Just wondering is it possible to use
<div><img src="xxx.jpg" /></div>
to center the image in the browser
List item to maintain it in the center when reduce browser width for responsive layout
when browser with is smaller than the image it will "not" reduce the image size
instead it will crop the image (overflow:hidden) with the scrollbar but still maintain the image center...
is it possible for using img tag to do this?? I know I can perform it easily with background image using css.
but since I'm working on a CMS site and the image is uploaded by client side, so background image is definitely not a solution....
I think point 3 and 4 make it impossible to do this with CSS only as you would have to set the scroll position using CSS, the best I can come up with using CSS only is: jsFiddle and a Fullscreen Demo.
body {
text-align: center;
}
div {
max-width: 100%;
}
img {
margin: 0 -100% 0 -100%;
}
This approach keeps the image in the center at all times, and it kind of doesn't really reduce the image size, but because I've had to use negative margins, you can't scroll the invisible parts into view.
Instead going for a JS approach you could do it this way: jsFiddle and a Fullscreen Demo.
CSS
body {
text-align: center;
}
div {
width: 100%;
overflow-x: auto;
}
JS
$(window).resize(function () {
$("div").scrollLeft(($("img").width() / 2) - ($(this).width() / 2))
});
This approach uses jQuery to ensure the center of the image scrolls into view whenever the browser window is re-sized.

Is there a Vertically Responsive Gallery Plugin? Jquery or Javascript?

Can anyone point me in the direction of a horizontal and vertically responsive gallery slider plugin or Jscript?
I have tried Flexslider1/2, Galleria, various other plugins, but they are all a set width and don't seem to respond to resizing the browser vertically? I have tried changing all the CSS but no luck.
Any help at would be greatly appreciated.
Example (With Flexslider): If you resize the browser horizontally, the images will automatically resize to fit within the browser window. If you resize vertically this will cut off the image vertically.
Aim: When you resize the browser window vertically the image will change width and height to keep ration and fit within the browser window. Same with Horizontal.
Hopefully I have explained this clearly. If you need clarification please ask rather than down voting.
Having a poke around the code in Flexslider I couldn't find anything specifically excluding the possibility of an image resize on vertical window change. The image resize appears to be purely CSS based which then feeds the width/height inforomation into the javascript. It appears you are stuck with a DOM/CSS issue of the browser not resizing an image on a vertical window change and then a little bit of this not being a tested FlexSlider setup.
It'a always been a bit finicky to get all browsers to understand 100% vertical layouts with no vertical scrolling as it's not the normal layout paradigm. Subsequent CSS versions have helped a bit but there's still a big difference between how browsers react and interpret what you mean by 100%.
I took the slider demo and borrowed most of a stack answer to manage the 100% vertical layout and ended up with this with the detail below.
First, change your image CSS properties to scale the height of the layout and set the width auto to keep the correct aspect:
width: auto;
height: 90%;
This works on an image by itself but the FlexSlider javascript adds some extra elements into the page and also defaults some CSS width values in the demo for the horizontal layout.
.flexslider .slides img {width: 100%; display: block;}
becomes
.flexslider .slides { width: 100%; display: block;}
.img {display: block; }
Now you have a slideshow working in Chrome.
Firefox won't apply the images 100% height to the elements containing the like Chrome so I had to step back through all the elements and apply the 100% height rule in CSS
.flexslider .slides {height: 100%; width: 100%; display: block;}
.img {display: block; }
.flex-viewport img{ height: 100%;}
.flex-viewport li { height: 100%;}
.flex-viewport ul { height: 100%;}
.flex-viewport { height: 100%;}
You'll see I did the img there as well. And you end up with the page.
One draw back to this solution is you now have an image that will resize past the horizontal size of the screen. You probably need to build something in to cater for this as you will run into issues if you use the basic carousel which is dependendant on the width to work. Also something funky happens when you mouseOut of the screen adding a horizontal scroll bar but I'll leave that one for you. Also try IE at your own risk.
...and this is why I shy away from front end development =)
Sorry that post ended up being a bit of a running commentary of me poking about.
I also wanted an image slider that was vertically responsive (and horizontally). After not finding anything out-of-the-box that worked they way I wanted I started fiddlin'.
Here's the result.
Here's the key elements (go to the jsFiddle for the full demo). It's not quite perfect but should be enough to get you started.
HTML
<div id="fader">
<img src="http://placehold.it/600x600&text=Slide1" >
<img src="http://placehold.it/600x600&text=Slide2" >
<img src="http://placehold.it/600x600&text=Slide3" >
<img src="http://placehold.it/600x600&text=Slide4" >
</div>
CSS
#fader {
position: relative;
width: auto;
height: 100%;
}
#fader a {
display:block;
width:auto;
height:100%;
}
#media screen and (orientation: portrait) {
img {
width: 100%;
height:auto !important;
}
}
#media screen and (orientation: landscape) {
img {
height: 100%;
min-width:10%;
max-width:100%;
}
}
Special thanks to this jsFiddle for the lightweight jQuery rotator.

Categories