Change width so height fits in window screen? - javascript

I'm working with a responsive site and I want the homepage to not require any scrolling. Right now, it has a header (239px tall) and a footer (94px tall) and then Owl Carousel sliding through images in the middle of the page. The CSS on the Owl Carousel is at 100% width, which shows the whole image. But the way the slider is setup, if I change the container height to be window.innerHeight, it crops the image in the slider (still 100% width).
How can I have the Owl Carousel be a relative height that changes the width to the exact % width so that Header + Owl Carousel + Footer all fit the users browser window without having to scroll?
EDIT:
<div id="post-111" class="post-111">
<div class="sy-box">
<div class="sy-slides-wrap">
<div class="sy-slides-crop">
<ul class="ken-slider">
<li class="sy-slide kenburns""><img alt="" src="image.jpg"></li>
<li class="sy-slide kenburns""><img alt="" src="image.jpg"></li>
</ul>
</div></div></div></div>
This is the basic structure of the Owl Carousel. And has the <'header'> of 239px tall and <'footer'> of 94px tall. The images scale to fit the width of the .sy-box, and max-height:none;
Here is a great, very similar example to what I'm working with. Header, footer, Owl Carousel in the middle. How would you take this page and make it fit the screen (without cropping images, simply having them scale so they fit on the page)? http://www.isidrophotographer.com

Easiest way to do this would actually be to use vh and vw units in your CSS. Supported everywhere except of course IE is only partial support and opera.

You should make position as absolute and try these ...
.fit{
width:100%;
height:100%;
position:absolute;
background-color:red;
}
<div class="fit"></div>

From what I understand you'd like your images and divs to respond to the screen size. This is my solution based on what you've said. Hopefully its enough for you to solve your issue. Make sure you try resizing the window to see how your images react.
I would also highly recommend you check into bootstrap.
jsFiddle
css:
img {
width: 100%;
}
.post-111 {
width:100%;
height:100%;
position:absolute;
background-color:red;
}
.sy-box {
background-color: blue;
height:500px;
width:80%;
}
.kenburns {
display: inline-block;
width: 45%;
}

jsfiddle.net/q6rL4jkk/4 . I think that JS tool, imgLiquid, may do it. fixed header/footer, and image scales to be as big as it can without skewing in the middle and no scroll bars. Now just need to figure out how to put that on my site.
$(function() {
$(".sy-slides-wrap").imgLiquid({
fill: false,
horizontalAlign: "center",
verticalAlign: "50%"
});
});

Related

How to make my image gallery width responsive to div below it?

I have an image gallery with name slider1_container and it's style properties are specified within the HTML code such as:
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:700px;
height: 600px; background: #191919; overflow: hidden;">
This works perfectly, except that the slider is wider than the div box beneath this. This div box is 100% of the width of the parent class "rightcolumn", and my slider1_container div is ALSO within this class, but since it's width of 700px is set within the HTML code, it doesn't seem to be responsive at other viewport sizes.
I've tried to use media queries at various points to change the width of the slider1_container to something smaller than 700px, but it seems that the width specified in the HTML code overrules that.
[DEAD LINK REMOVED, PLEASE UPDATE]
If I set the 700px to auto, the width works perfectly BUT the image gallery shows only black when you load the page, until you choose another photo it will quickly appear (javascript issue it sounds).
If you resize the viewport on my site you can see the image gallery's width doesn't match the div box below it How can I make this responsive like the other div?
Thank you!!
Read the documentation for whatever slideshow plugin it is that you are using. It most likely has settings for responsiveness. If not, you can find a million different responsive slideshow plugins here

fixed div overlaps scrollbar

I have problem with fixed div placed in other div with scrollbar. It overlaps scrollbar. it happend under safari and ie 11. When i set z- index to lower than divs with scrollbar than fixed div is under it and it losses interaction (you cant click links etc).Also i tried to make fake fixed position setting it to absolute and with javaScript set "left" to "scrollLeft" div with scrollbar but i cant use this solution because it gives strange effects under Safari and IE10.
Here is code:
HTML
<div id="cont">
<div class="spacer s2"></div>
<div id="target" class="box2 blue">
dsfsdf
</div>
</div>
CSS
#cont {
width:100%;
height:800px;
overflow:hidden;
overflow-x: scroll;
z-index:0
}
#target {
width:200px;
height:800px;
position:fixed;
overflow:hidden;
background-color:red;
z-index:0
}
.spacer {
width:3000px;
height:1px;
z-index:-1
}
And link to jsFiddle.
Please help me ive tried to find solution over 3 days
Thanks in advance
change Position from fixed to absolute
<div id="target" class="box2 blue" style="width: 200px; height: 800px; position: absolute; overflow: hidden; background-color: red; z-index:0">
dsfsdf
</div>
Its just because of your this line
<div id="cont" style="width:100%;height:800px;overflow:hidden;overflow-x: scroll;z-index:0">
Remove overflow from your style and it will work
It should be looks like
<div id="cont" style="width:100%;height:800px;z-index:0">
Demo
[Updated]
Please check new Demo
This is the right behavior. It happens in chrome too.
Why ?
position:fixed should be relative only to the viewport. When you set it on an element, that elemenet is taken out of the flow of any parent and overlapped according to the z-index.
This needs to be treated case by case for correct behavior in my opinion.
Also, maybe this fits your use-case:
<div style="display:inline-block;position:fixed; max-height:100px;overflow:hidden;">
<div id="target" class="box2 blue" style="width:200px;height:800px;overflow:hidden;background-color:red;z-index:0;">
dsfsdf
</div>
</div>
It wraps the fixed div in another one that has display:inline-block to enlarge to the size of the content and a max-height so it will not go over a fixed size.
If you need it to be contained by another div than you can simulate this. You can set position fixed when the fixed div should be visible and change to position absolute when the bottom of the fixed div hits the top of the scrollbar.
Edit:
You can set an elements height using top and bottom so you could probably do something like this and you calculate the bottom with javascript. The bottom would become the scrollbar height + padding.
Another way would be to calculate the height of the fixed div to be calculated like this:
var sizeUntillBottomScrollbar = containingDivHeight - containingDivScrollTop;
if(sizeUntillBottomScrollbar <= scrollBarHeight)
fixedDivHeight = windowHeight - scrollBarHeight - sizeUntillBottomScrollbar;
else
fixedDivHeight = windowHeight;
The scrollbar height can be calculated (there are other answers on that) and the above code is pseudocode so don't expect it to run as-is.
There is also another way if you need it to be 100% all the time. But is quite complicated.
You have to make your custom scrollbar functionality (or use a plugin, there are quite a lot) and set on the custom scrollbar a higher z-index than the fixed div and also set position:fixed on the custom scrollbar too when the scrollTop of the containing div is equal to its height - the custom scrollbar height.

Crop and center arbitrarily-sized image within a div

I have a div within which I would like to put any arbitrarily-sized image, preferably using an img tag rather than the CSS background-image style. I've looked at many other similar questions and none have answered my question.
The way I would like the image to display is this:
If the image is portrait (height is greater than width), the image will have a width of 100% within the div and be vertically centered. The extra height will be outside of the div, but not visible (as in, the image would appear 'cropped'.)
If it is landscape, the properties in #1 would apply, but horizontally instead of vertically.
I do not want to stretch the image. I do want to fill the entire space within the div.
An example of this would be the image boxes that appear on imgur.com.
Try centering it with javascript. Just set the position: absolute, left:50%, top:50% and margin-left:-width/2, margin-top:-height/2
I'm surprised this question doesn't have an easy to find answer anywhere online, but I came up with a (mostly) pure CSS solution that might help someone. The idea is that there are two possible sizes for the image:
Width is 100% of the parent, height is determined by aspect ratio
Height is 100% of the parent, width is determined by aspect ratio
Of these two options, the one that is preferred is simply the bigger one, since the smaller one will leave gaps around the edges. Therefore, we can use a div in between container and image to "calculate" the larger size. Here's my code:
const image = document.getElementById("image");
const sizer = document.getElementById("sizer");
image.onload = () => {
const aspectRatio = image.width / image.height;
sizer.style = `aspect-ratio: ${aspectRatio}`;
};
#container {
position: relative;
overflow: hidden;
width: 400px;
height: 250px;
resize: both;
}
#sizer {
min-width: 100%;
height: 100%;
position:absolute;
left:50%;
top:0px;
transform: translate(-50%,0);
}
#image {
width: 100%;
height: auto;
position:absolute;
left:0;
top:50%;
transform: translate(0,-50%);
}
<div id="container">
<div id="sizer">
<img id="image" src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg"/>
</div>
</div>
Try dragging around the corner of the image to check how it works.
The only JS required is to fix the aspect ratio of the sizer, and it's quite lightweight (only required when the image src is loaded). I believe this will also work across almost all browsers and versions, since the CSS is very basic.
Hope this helps someone!

Image no longer responsive as put in table cell layout

I'm trying to center an image on a site. As I want it to be centered both horizontally and vertically I used a table/table-cell layout as following:
<div id="mainContainer>
<div id="horizon">
<img src="url">
</div>
</div>
Here mainContainer ist set to display: table and horizon is set to display: table-cell.
Unfortunately the image is no longer resizing proportionally as it becomes part of this structure. As soon as I move it into the table/table-cell divs it resizes to its original size (instead of being resized proportionally because of max-width: 100% and max-height: 100%)
see: http://jsfiddle.net/U8KcN/
EDIT:
My bad. I just tried to simplify the issue. I want to build a little slideshow for images. The problem here is that I do not know which sizes the images are (referring to someone else using the slideshow). So in simple terms I need a specific CSS that 1) centers the image vertically and horizontally in the div if its width and height are smaller than the div's dimensions, 2) resizes the image automatically if it is bigger than the div's dimensions (unnecessary to add, it is unknown whether it's width or height is bigger).
source: OP Comment
Every time I hear someone talk about the evils of using tables and then see them create a complete table structure out of DIVs with pretty much the same amount of markup -- sometimes more -- it really gets on my nerves.
By the way, have you ever developed a site for someone who wanted to do some of their own layouts in the content area using a CMS like Wordpress? The only way someone with almost no HTML knowledge can do that well is by allowing them to use table tools in Tiny MCE or another editor. So yes, tables are still important.
Recently, I had to do just that for a customer, but the images in the table cells were not responding and shrinking for smaller screen sizes. All I had to add to my CSS to care of that problem was:
table {
table-layout: fixed;
}
Now the images in the table cells are growing and shrinking accordingly, and the horizontal scrollbar is no longer appearing. Oh, of course you have to use percentages in your table width and td widths as well.
How about dropping that "CSS-table" stuff and doing it a bit easier?
<div style="width:auto;height:auto;margin:25%;text-align:center;vertical-align:middle">
<img src="URL">
</div>
At least, that’s how I would handle it...
EDIT:
Please note that I've put the CSS inline to show you what element should get what style. In production, you should — as a comment to this answer correctly stated — always separate style from code like. So, practically, you'll end up with something like this:
<style>
.centerimg {
width:auto;
height:auto;
margin:25%;
text-align:center;
vertical-align:middle
}
</style>
...
<div class="centerimg">
<img src="#">
</div>
EDIT 2:
Replying to the related comment, here's the update to make the image fit it's parent proportionally:
If your image has a bigger width than height...
<style>
...
img{
max-width:100%;
height:auto
}
</style>
or, if your image has a smaller width than height...
<style>
...
img{
max-height:100%;
width:auto
}
</style>
EDIT 3:
Looking at your fiddle, I came up with this which works like you want it to work:
<style>
*{
width:100%;
height:100%;
margin:0;
text-align:center;
vertical-align:middle
}
img{
width:auto;
height:100%;
}
</style>
I've forked your fiddle to show the updates: http://jsfiddle.net/LPrkb/1/
EDIT 3:
As the OP doesn't seem to be able to decide what he needs, I'm adding this final edit due to his latest comment.
You could also use a CSS background-image with "background-size:contain" on the "mainContainer" and be done with it... check http://jsfiddle.net/HGpfJ/2/ or look at this 100% working example taking a completely different approach which results in just the same effect/functionality:
<!DOCTYPE HTML>
<html itemscope="itemscope" itemtype="http://schema.org/WebPage">
<head>
<title>Example</title>
<style>
html,body{width:100%;height:100%;margin:0;padding:0}
#centerimg{
width:100%;
height:100%;
background:transparent url(http://oi42.tinypic.com/v9g8i.jpg) no-repeat scroll center;
background-size:contain;
}
</style>
<body>
<div id="centerimg"></div>
</body>
</html>
Let's face the facts: depending on where in the document structure you want to have the image "centered", there are more than a dozen of ways to do it.
If OP needs specific code, we will need the complete document structure from OP and not simply a "generalized" code-snippet which could be anywhere in whatever document structure.
Using tables (display: table-cell) for layout is a web development anti-pattern these days. Try using the <span> element with display: inline-block to vertically and horizontally center the image, as this method will work all the way back to IE 6. Also, you can change the image size to be a percentage if you want it to resize according to its container:
http://jsfiddle.net/hHWy8/1/
HTML:
<span class="horizontal">
<span class="vertical">
<img src="url" />
</span>
</span>
CSS:
span {
display: inline-block;
}
span.horizontal {
text-align: center;
width: 100%;
}
span.vertical {
vertical-align: middle;
border: 1px solid black; /* put a border on container for display purposes */
line-height: 1000px; /* this sets the vertical height */
overflow: hidden;
white-space: nowrap;
}
span.vertical img {
height: 50px; /* set your image height (could be percent) */
width: 50px; /* set your image width (could be percent) */
}
span.vertical br {
display: none;
}
To resize your image you could use this css:
html,body,div,img{
height:100%;
}
img { width:100%}
It sets the html and body's height to 100%, this is needed so the height of your page takes all available space

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