I'm trying to make a vertical slider using Swiper.
It wants to look like the images do on this site
https://www.ikbird.com/
But respond a little better to browser size changes.
Its just to contain images like the example. I want each image to be the same height. So, say it takes up 80% of the screen height.
I can achieve that, but not at the same time as scaling by width
I've tried vh and vw units in css. The problem is, I can get it working for width, but then it doesn't work for height, and vice versa.
I've tried using vh and vw, but nothing seems to work both ways.
Here's one version of CSS I tried:
.swiper-container {
width: auto;
height: 100%;
max-height: 100%;
text-align: center;
background: blue;
}
.swiper-container-container {
margin-top: 5vh;
height: 90vh;
background: green;
}
img {
max-width: 100%;
max-height: 100%;
height: 100%;
}
With the HTML (for some reason the vh units break if its not got an outer container)
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/placeholder-a.png"></div>
<div class="swiper-slide"><img src="images/placeholder-b.png"></div>
<div class="swiper-slide"><img src="images/placeholder-c.png"></div>
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
centeredSlides: true,
/*cssMode: true,*/
mousewheel: true,
keyboard: true,
/*freeMode: true,*/
spaceBetween: 30,
})
</script>
Does anyone have any idea how to implement this? If its in a different slider or with a different technique that would be fine.
Thanks
Related
I need the image to take the entire width of the container unless the resulting height is bigger then the available container's viewport height.
Basically I want the image to be responsive but also that it should still fit the screen. If it doesn't fit the screen it should be scaled down, horizontally centered, and preferably added with black tiles on its sides.
Currently, my CSS class looks like this:
.img-responsive{
display: block;
max-width: 100%;
min-width: 100%;
height: auto;
}
I've tried to play around with max-height on the image, or on a dedicated container, nothing seemed to do the trick by pure CSS.
Clarifications:
I don't know the images dimensions in advance so can't just put them in a container with a preset size.
Basically, my goal is for the images to be always fully visible on the screen (if you scroll to the image) and take up the largest possible surface.
Here's a more detailed example:
Let's say I have scrollable container with a lot of content. The container takes up the entire viewport width (let's say its 500px) and the available visible height of the container is the entire viewport height minus a navbar height (let's say 1000px).
I can't know in advance what's the container's visible dimensions as it can always change.
Inside the container there's whatever, text, images, etc.
Now, for a given image, here are possible scenarios:
If the image is 500x800, it should be presented as is, as it takes up the entire available width, and height is no bigger then the container's visible height.
If the image is 500x2000, it should be scaled down to 250x1000
and horizontally centered. This will take up the entire visible container's height, and keep the image's aspect ratio
If the image is 250x300, it should be scaled up to 500x600, taking up the entire available width
If the image is 200x500, it should be scaled up to 400x1000, taking up the entire available height
If the image is 1000x1000, it should be scaled down to 500x500, taking up the entire available width
Here's a JSFiddle explaining the problem
I would advise against using the IMG tag for this. Rather use a div tag and then use background image properties. Here is the code for this, set the container size to whatever you like:
<div id="container"></div>
<style>
width: 500px;
height: 500px;
background-image: url('your url');
background-size: contain;
</style>
background-size: contain is what is best for this. It scales the image to the largest the image can be within the div without making it larger than its native size. Hope this helps
EDIT:
Forgot to add that if you want it to be in the center of the container, so that when the image doesnt fit the full size of the container there is the white space around it, you use the css code background-position: center center;
Mostly what you need is to give img elements two properties {max-width:100%} and {height: auto}
If you open the snippet below in full screen and resize your window (Note: image sizes are randomly chosen)
you will see how nice they play. They adhere to the max width and they don't overstretch themselves in any direction.
I added some code in there just to make this easier to show
like making giving images {display:block} and {padding-bottom}
body {
background: #131418;
text-align: center;
color: white;
font-size: 25px;
}
body,
.image-container,
.image-container img,
.smalldiv {
max-width: 100%;
}
.image-container img {
height: auto;
display: block;
padding-bottom: 1em;
}
.smalldiv {
/*for demnostration only */
width: 600px;
background: darkblue;
}
.smalldiv,
.image-container img {
margin: 0 auto;
}
<h3>Images will always keep their aspect ratio and they will always adhere to the width of their parent containers.</h3>
<hr>
<div class="image-container">
<h4>This is what the image container looks like when it has the entire screen space</h4>
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/650x150">
<img src="http://placehold.it/950x150">
<img src="http://placehold.it/1250x3150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/450x350">
<img src="http://placehold.it/550x650">
<img src="http://placehold.it/650x950">
<img src="http://placehold.it/1250x1150">
</div>
<div class="smalldiv">
<div class="image-container">
<h4>This is what the image containing div looks when it's put inside a container smaller then the screen width</h4>
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/650x150">
<img src="http://placehold.it/950x150">
<img src="http://placehold.it/1250x3150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/450x350">
<img src="http://placehold.it/550x650">
<img src="http://placehold.it/650x950">
<img src="http://placehold.it/1250x1150">
</div>
</div>
evilgenious448 answer comes really close, just that it only works with background images. What I have is:
<html>
<head>
<style>
body {
margin: 0px;
}
.holder {
background-image: url('image1.JPG');
background-size: contain;
background-position: center center;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="holder">
<div class="inner">
</div>
</div>
</body>
</html>
I do not know how to size the inner div equally to the image.
Here is an example with code and everything:
You can drag around the page to test.
--- When the viewport is higher / taller than the image, the image's width is the width of the viewport disregarding viewport height. On the other hand, when the viewport is wider than the image, the image uses the viewports height, disregarding its with.
#image {
background-image: url(https://media.cntraveller.com/photos/611bedcd231ed5e8dfa34573/16:9/w_2580,c_limit/sennen-cove-beach-britain-conde-nast-traveller-20april18-rex.jpg);
background-size: contain;
background-position: center center;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
}
<body id="body">
<div id="image" />
</body>
You can use height: 100% of the parent container (in my case its img-holder). And apply text-align: center to the parent. Like:
.img-holder {
width: 100px;
height: 100px;
border: 1px solid #555;
text-align: center;
}
.img-holder img {
height: 100%;
}
Have al look at the snippet below:
.img-holder {
width: 100px;
height: 100px;
border: 1px solid #555;
text-align: center;
}
img {
height: 100%;
}
<div class="img-holder">
<img src="http://placehold.it/100x200" alt="">
</div>
Hope this helps!
The best and the easiest way is to use vh and vw properties. vh when set to 100 takes up the complete Viewport Height and same goes with vw for width. Further, max height property may be added to stop image from stretching beyond its original dimensions.
I've searched for a lot of answers and tricks for this but nothing worked for me.
Some briefing: The project has a homepage with 5 sections (about us,activities,contact etc...). Each section must have AT LEAST 100% height. That means that if the child's containt is "little", then the section must have height 100% (the screen resolution has effect here). But if the child's containt is "large", then the div with class bg-color and the section must expand to over than 100% height so it can contain all the content. Each section has a different background-image and i used bg-color to add a transparent color over the background image.
The html structure seems like this
<section class="each-page about-us">
<div class="bg-color">
<div class="container page-content">
...CONTENT...
</div>
</div>
</section>
<section class="each-page activities">
<div class="bg-color">
<div class="container page-content">
...CONTENT...
</div>
</div>
</section>
<section class="each-page work-with-us">
<div class="bg-color">
<div class="container page-content">
...CONTENT...
</div>
</div>
</section>
The css seems like this:
body, html {
height: 100%;
width: 100%;
}
.about-us {
background-image: url("../images/bb2.jpg");
}
.each-page {
border-top: 1px solid #fff;
height: 100%;
}
.bg-color {
background-color: rgba(35, 124, 170, 0.6);
height: 100%;
width: 100%;
}
Some divs with class container page-content have a lot of content. But since the parent divs have height:100%, this content overlays the section at the bottom and it's pretty ugly. Especially when i test it in low resolution screens, almost every section seems broken! i dont want to set overflow with scroll bars.
Any suggestions/solutions please? Since the project will be mobile friendly (bootstrap), a responsive solution would be the best option.
Thank you in advance.
You can achieve it by using view height unit vh , in the fiddle you can see that every .section div has at least full height, see sectionThree has lots of content so it has more height
JS Fiddle
.each-page {
border-top: 1px solid #fff;
min-height: 100vh;
}
----------
UPDATE 1:
In order to fix it for Safari versions less that 8 -because view units are supported in Safari 8+- all you need is to add this to your javascript:
var UA = navigator.userAgent,
Ver = parseInt(navigator.appVersion,10);
if (UA.indexOf("Safari")!=-1 && Ver < 8) {
// it is safari and version less than 8;
// use javascript to fix it.
$('.each-page').css({'min-height': $(window).height()});
}
And that's it JS Fiddle 2, tested on Safari 5.1.7
http://caniuse.com/#feat=viewport-units
https://css-tricks.com/viewport-sized-typography/
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
https://dev.opera.com/articles/css-viewport-units/
http://www.w3schools.com/cssref/css_units.asp
You can also make section 100% height with js
$(window).on("resize", function () {
var fullHeight = $(window).height();
$('section').height(fullHeight);
}).resize();
.s-one {
background: blue;
}
.s-two {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="s-one"></section>
<section class="s-two"></section>
I have set the google map to have a height of 85%. If the window is big enough it will have the proper size. But if the window is small it overlaps somehow.
Here some images
When window is big enough:
When window is smaller (no gray border at the bottom):
Some of the code. I use Bootstrap 3
HTML:
<div class="row full-height">
<div class="col-md-12 full-height">
<div class="map-container">
{{> googleMap name="map" options=mapOptions}}
</div>
</div>
</div>
CSS:
html, body, section, .mainpanel, .contentpanel { height: 100%; }
.full-height {
height: 100%;
}
.map-container {
width: 100%;
height: 85%;
position: relative;
}
I wish it would resize properly so it does not overlap.
Any help would be appreciated.
To achieve the effect you are after, you either must use JavaScript to size/resize the map div or use CSS positioning techniques.
I've recently tried out to make a website with a bar on top and with an image that cover the rest of the screen, much like this X-theme demo. I've managed to get it right in proportion (with a lot of help from this thread).
<body>
<div id="block">
<p>logo</p>
</div>
<header>
<h1>jumbotron</h1>
</header>
<div id="page">
<p>content</p>
</div>
*{
margin: 0;
}
#block {
height: 10vh;
width: 100%;
background: red;
background-size:cover;
}
body{
width: 100%;
height: 100%;
}
header {
height:90vh;
width:100%;
background: green;
background-size:cover;
}
This solution is however not so practical. When you shrink down your browser window, the bar on top (naturally) shrinks as well. Adding a logo would then be impossible, so I wonder if there is any way to make the bars size constant, while the header still takes up the rest of the screen?
I would really appreciate some help! :)
Because vh and px are two different units, it is not possible to do some math with them like 100vh - 30px, but it's possible using some jQuery/JavaScript. I'll give you an example using jQuery (Be sure to add a fixed height to the header).
On the end of this answer there is a CSS-only solution for this problem. Found out about it later.
This is the html code:
<header class="header">YOUR LOGO HERE</header>
<section class="jumbotron">CONTENT HERE</section>
<section class="content">SOME OTHER CONTENT HERE</section>
And this should be the javascript one:
var resizePage = function() {
var headerHeight = $('.header').outerHeight() // Getting the height of the header
, pageHeight = $(window).height(); // Getting the height of the window
$('.jumbotron').css('height', (pageHeight-headerHeight));
}
$(window).on('resize', resizePage()); // Fire every time the page resizes
resizePage(); // Fire once the site is running
Here is a JSFiddle working with the snippets I told you: CLICK ME
UPDATE: Just found out that CSS is providing a calc() method. Here is another JSfiddle with this method: CLICK ME, TOO. So it is possible using pure CSS, but be aware of the browser support for this.
.jumbotron {
/* Viewport height 100 minus 50px calculated using pure css */
height: calc(100vh - 50px);
}
this is what i got, but that is only one background color that fill 90% of the screen. But i would like to have another color under.
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 90%;
background-color: #20a2d6;}
You can find an example of what I'd like to get here
http://www.spelltower.com/ is using HTML section tags for those colored backgrounds. It's not just a single element with multiple background colors. Javascript is used to resize each section as the browser window is resized.
HTML
<div>
<section id="first_section">First Section</section>
<section id="second_section">Second Section</section>
<section id="third_section">Third Section</section>
</div>
CSS
#first_section { background_color: blue; }
#second_section { background_color: red; }
#third_section { background_color: green; }
Javascript
//When the browser window is resized...
$(window).resize(function() {
// Get the new window height
var windowHeight = $(window).height();
//Determine the height we want each section, in this
//case we don't want it to be less than 600 pixels tall
var newHeight = windowHeight;
if(newHeight<600) newHeight = 600;
$('section').css('height', newHeight);
});
If you inspect the source on spelltower.com, you'll note that what you are seeing ins't multiple background colors applied to the whole page. Each of those sections has it's own background color.
If you want your body being 90% of one color and the remaining 10% of another color, then you should create two containers into your HTML body: to each of it, you will assign a different CSS. To explain you the logic (I let you do the rest about positioning, sizing etc.):
HTML: here you create two separate div containers...
<body>
<div id="first_section">
<div/>
<div id = "second_section">
<div/>
<body/>
Hence, you will attribute the style properties into your CSS to each of them...
#first_section{
width: 100%;
height: 90%;
background-color: red;
}
#second_section{
width: 100%;
height: 10%;
background-color: blue;
}
I would suggest in particular Bootstrap, which is a nice collection of classes and Javascript functions that will allow your website to be responsive as soon as the browser size changes (from full-screen to tablet or phone, for example).