I am creating a website I am using carousel bootstrap, the website is mobile friendly, however the only problem I have got is that the slider images do not shrink with the image, so it ends up making them look stretched out. I have tried max-width and max-height 100% but it does not work any advise?
If you resize your browser you will get what I mean, the header height does not shrink.
This is an example of the index page:
http://pastebin.ca/2648252
This is my css
http://pastebin.ca/2648251
Code was too long to post here, Can be seen on there no download required.
Thanks.
Try adding the img-responsive class to the carousel images..
<img src="/images/logo-1.jpg" class="img-responsive">
http://www.bootply.com/117666
Related
I want to set a responsive image in my webpage using tailwind css. I have provided sufficient classes to make it work on different screen sizes. Now I am getting the following error in page-speed.
How can I eliminate the warning?
Try to use Tailwind aspect ratio.
It work fine
You can eliminate this warning by adding width and height to your images like this:
<img loading="lazy" src="assets/image/brainstorm/svg" alt="brainstorm" width="400" height="200" class="w-5/6 mx-auto" />
Basically adding width and height directly to html img tag prevents layout shifts, even if img is not loaded yet. It's especially important when img is lazy-loaded. More info here
Just adding height and width attributes and classes won't work, you have to crop the images as well to its exact dimension. For example if you have set 100px height and width, the image height and width should also be 100px.
Background
This warning exists to prevent layout shift when images load. Currently, the images have the classes w-5/6 mx-auto. This is enough to make the images responsive, but before the images are loaded, the browser doesn't know how tall the image is. Hence, when the image loads, there will be layout shift.
You then need to tell the browser how wide and tall the image should be before it loads. There a few ways of doing this.
With known dimensions
If you know the height of the image, I'd recommend following fromaline's answer.
<img src='assets/image/brainstorm.svg' alt='nature' class='w-5/6 mx-auto border' width='300' height='300' />
Because we've defined the display width with w-5/6, the image will be responsive. The width='300' and height='300' properties are then used for the aspect ratio.
Here's a link from the Tailwind playground to show you how it's both responsive and removes layout shift: https://play.tailwindcss.com/rjz9ylFNl5?size=482x720
With unknown dimensions
If you don't know the width and height of your images and you need them to be responsive, you need to essentially create a container with a fixed aspect ratio. I'd recommend looking at the aspect ratio plugin.
<div class='w-5/6 aspect-w-16 aspect-h-9 mx-auto'>
<img src='assets/image/brainstorm.svg' alt='nature' class='object-cover w-full h-full' />
</div>
Again, a link to a Tailwind Playground demo: https://play.tailwindcss.com/2zmPJixbrO?size=584x720
I am using bootstrap modal in my application but when i see in mobile it's content is shows out of modal. I tried to use min width of modal so if modal show in mobile screen that width should not go beyond from min width.
but did not work.
Try max-width it will restrict the div that you are using to go beyond the limit.
I think in this case min-width is what you are having trouble with.
Try adding a div class="container" (with brackets, I don't know how to type it with them) to the inside of the modal.
Also, it might help if you could show me your code.
I am using the latest version of bootstrap. I have a fullscreen carousel with content inside of it that is vertically centered, 2 issues:
I cannot extend the image all the way, I am missing a height:100%; somewhere in my code I am sure of it but I cant figure out where it should be!
EDIT: another issue I am having is getting my .carousel-content class to extend fullscreen as well (so the content is vertically centered) this works if there is a fixed height on the slider but it is just aligned to the top on the fullscreen version
My fullscreen carousel is not taking the navbar into account so it extends past the viewport. I was able to fix this by adding margin-top:-121px; (the height of my nav/header) but this is not a fix i like as 121px of the image are hidden under the header.
Updated fiddle: http://jsfiddle.net/bwupc7g6/1/
Am sure this will be useful to other users as well if anyone can take a look.
.carousel-inner .item div {
height:100%;
}
I recommend you to use a proper class name for that div since it doesn't have one.
I have a div with 1184x308px and inside I have dynamics images logo (vertical and horizontal). How can I do to the image fill the div without stretch?
If your image is not big enough to fill the space as it seems you want then you cannot just simply have css styles with width: 100% height: auto; without stretching it. One option you could use to serve the right image at the right screen size is using srcset but it is not too well supported and you will probably want to use picturefill
To use srcset on it's own you would use this:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="dynamics">
It can be a bit tricky but a quick google on srcset should help you out or this is good info on it.
What is wrong with the CSS (at least I think it is CSS related) that one particular div with a slider is not responsive anymore? The rest of the site is still responsive.
http://websiteprofessioneel.nl/
It is the big square image slider in the content right (so not the image in the left sidebar or the header image). The maindiv container that contains the rest of the slider is : <div class="scheeps_slider">
You can see the image is not scaling down anymore if you make the screensize smaller than the image width.
Is there CSS in one of the underlying divs of the slider or li's that break responsiveness?
Extra info:
( Note: It did work responsive fine when the slide was not clickable, but to get it clickable with custom fields html was slightly altered to get a setup with an ul and li approach, but I don't get how that should interfere with responsiviness)
The slider-jquery used here is from opensource 2cycle which acts as a perfectly responsive slider used in other pages so something in the specific css used here is messing it up I think