I need to use css style like max-width:90% and max-height:90% to define image size not overflow the windows. However, this work well on Safari but not work on Chrome. Here is the demo I write on jsfiddle: http://jsfiddle.net/hello2pig/rdxuk7kj/
<style>
div{
padding: 0;
margin: 0;
}
.slide{
text-align:center;
background-size: 100% 100%;
}
.user-img{
max-height: 80%;
max-width: 90%;
}
</style>
<body>
<div class="slide">
<div id="container0" class="container slideDown front">
<div class="image-container">
<img src="http://people.cs.clemson.edu/~bli2/hiOne/image/userImage/1.jpg" class="user-img" ></img>
</div>
</div>
</div>
</body>
If you open this demo in safari, whole image can be displayed, but image overflow the window on Chrome. Any method to fix the problem? Thanks for your help!
Some times using percentages for fluidity in layouts is tricky because you have to deal with containers and border-type things.
You might prefer to use viewport units. You can learn about them on css-tricks and caniuse will show you how well it's supported.
Essentially you can say:
<div style="height: 55vh;">Hi</div>
meaning a div element of 55vh height where 1vh is defined as the value of 1% of the viewport's height. Something that is 100vh will be 100% of the viewport's height.
You need to give an explicit value for the container. This would work:
.image-container {
width: 500px;
height: 300px;
}
In your case, the % is taken from the <html> element in the fiddle.
From MDN:
percentage
The percentage is calculated with respect to the height of
the containing block. If the height of the containing block is not
specified explicitly, the percentage value is treated as none.
Related
I have been using the following css to make my images responsive
img{
max-width: 100%;
height: auto;
}
However it doesn't seem to work when the img is within an <a> tag ie.
<img class="fbicon" src="images/fbicon.png" alt="main">
Why is this and what could be a way around it?
Here is the complete code - (it is responsive on the fiddle but not on the site):
https://jsfiddle.net/bLchqb9u/
use width insted of max-width , find the working fiddel : https://jsfiddle.net/5n4rarrL/
The 100% always applies to the value of the parent element. By default <a> doesn't have a 100% width (it's would just be as big as it's content). You would have to change the behaviour, like this:
<img class="fbicon" src="images/fbicon.png" alt="main">
Demo here:
<div style="width: 300px">
<a href="#" style="max-width:100%">
<img style="width:100%;" src="https://upload.wikimedia.org/wikipedia/commons/1/17/Gustave_Caillebotte_-_Paris_Street%3B_Rainy_Day_-_Google_Art_Project.jpg" alt="main">
</a>
</div>
A percentage in max-width is resolved with respect to the width of the containing block.
Then, the only case where your code may not work is
If the containing block's width depends on this element's width, then
the resulting layout is undefined in CSS 2.1.
That should only happen when the width of the containing block is calculated with the shrink-to-fit algorithm. For example, floats, absolutely positioned or inline-blocks with width: auto.
div {
float: left; /* Shrink-to-fit width, depends on the content */
}
img {
max-width: 100%; /* Depends on the containing block */
height: auto;
}
<div>
<a href="#">
<img src="http://lorempixel.com/1000/200/" />
</a>
</div>
The solution is preventing the containing flock from depending on the content. Make sure it has an explicit width.
div {
float: left;
width: 100%; /* No longer depends on the content */
}
img {
max-width: 100%; /* Depends on the containing block */
height: auto;
}
<div>
<a href="#">
<img src="http://lorempixel.com/1000/200/">
</a>
</div>
You should make the <a> element a block container.
Like this:
a {
display: block;
}
img{
width: 100%;
height: auto;
}
<img class="fbicon" src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2_1x.png" alt="main">
This way the <a> tag will behave as a container and the image will stretch to the size of that.
Tried display and width suggestions, but still the the images were not responsive for some reason (while another img was), even though it worked on jfiddle. Finally, the new srcset came to the rescue,
<img class="fbicon" src="images/fbiconlarge.png"
srcset="images/fbiconlarge.png 1380w,
images/fbiconlarge.png 640w,
images/fbiconlarge.png 320w"
However must say, now its a bit too responsive - ending up too small on the smallest screen. Will post a separate Q. THanks #Oriol, Hasan, Hans, CodeiSir
I have been banging my head against the wall trying to figure out this problem and I have looked high and low for the answer and came up with similar results.
Synopsis
The problem is that I am building a website using the 960 grid and have three columns that I want to stretch at 100% at all times. Here is a fiddle for your reference: http://jsfiddle.net/Uec7h/1/
Essentially the html is like so:
<div class="contentWrapper">
<div class="container_12">
<div class="grid_2 leftSide clearfix">
Left sidebar content.
</div>
<div class="grid_7 content">
Lots of content loaded from the server.
</div>
<div class="grid_3 rightSide">
Right sidebar content.
</div>
</div>
</div>
with the CSS being like
html, body {
height: 100%;
}
.content {
height: 100%;
}
.leftSide {
height: 100%;
background-color: #000000;
}
.rightSide {
height: 100%;
background-color: #000000;
}
.contentWrapper {
height: 100%;
}
The fiddle isn't completely accurate to what I am seeing on my local version, but it's close. Seems like the left and right sidebars do not want to expand to 100% no matter what I do.
What I've Tried
Most of the answers I have found on SO have suggested to put height: 100% on the html, body elements and everything should work out fine. Adding this attribute and giving both sidebars height: 100% did work a little bit, but if the content in the middle column gets too big, it stops at a certain point and won't continue to stretch.
I have tried adding the clearfix class that comes with the 960 grid but it didn't seem to help at all.
Question
How do I get the left and right side bars height in the fiddle to be 100% no matter what content is in the middle column?
If you add the following CSS to the sidebar elements it will fill the 100% of the height.
display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;
If you place the sidebar into a wrapper div with relative positioning, the content section will be again in it's right place...
I would also set padding and margin to 0 for the body.
EDIT:
If you add height: 100% to the .container_12 it will get a real height, and children elements can have a 100% height. Notice that the sidebars will be as height as the window itself, but your content at the middle can be taller than 100%... Fiddle
Dont know the 960 grid, the EDITED solution - using visibility: visible; -
HTML
<div id="box">
<div class="vision"> sdfsdfsd </div>
</div>
CSS
#box {
float: left;
border: 2px solid red;
}
.vision {
width: 300px;
height: 600px;
visibility: visible;
}
I can't figure this out and it's probably fairly simple. I have several DIV elements that I need placed side by side (with no margin in between), and each div must have a set width of 100% of the browser width and min-height of 100% of the browser.
Like I said I'm sure there's a quick and easy trick to this, I just couldn't find much in my research. Thank you much!
Update: This seems to work:
http://pastebin.com/kuQyfwuG
Maybe you can wrap all your divs in a container div whose width is a lot bigger than the width of the browser (or at least the total width of all your divs laid side by side):
HTML
<div id="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
CSS
body {
overflow: hidden;
}
#container {
width: 10000px;
height: 100%;
}
.element {
min-height: 100%;
...
}
jQuery
$('.element').css('width', window.innerWidth);
body was given the property overflow: hidden; so that no horizontal scrollbars will be shown because of #container's size. And since giving .element a width of 100% will make it as wide as the #container element, you can add a little jQuery to make their width equal to the window's/browser's width.
I have a layout where I need to use height: 100% on html and body (and any wrapper divs I resort to using) to achieve an effect similar to pages, so that the content on my first "page" is centred, scrolling down the content on the second "page" is centred etc.
The html looks like this:
<section class="page" id="p01">
<div class="spacer">
</div>
<div class="outer">
<div class="inner">
Some content
</div>
<div class="inner">
Some content
</div>
</div>
</section>
<section class="page" id="p02">
<div class="spacer">
</div>
<div class="outer">
<div class="inner">
Some content
</div>
<div class="inner">
Some content
</div>
</div>
</section>
and the vertical centring etc. achieved with this styling:
body, .page {height: 100%; margin: 0 auto;}
.spacer {
float: left;
height: 50%;
margin-bottom: -150px;
}
.outer {
height: 300px;
width: 100%;
background-color: #fca;
clear: both;
position: relative;
display: block;
white-space: nowrap;
}
.inner {
width: 41%;
margin: 0 6%;
height: 300px;
background-color: green;
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.inner:first-child {
margin-right: 0;
}
You can see it at work in this fiddle:
http://jsfiddle.net/terraling/3V5rV/
The problem is the body background (here I'm just using color, but on my site it will be an image) leaks out into the body margins, i.e. the body content has a max-width and should be centred with white margins.
I can fix that either by... setting html background-color to white, as per
http://jsfiddle.net/terraling/yM53t/
...but body background becomes cutoff when scrolling into the second page (that wasn't a problem in the first fiddle).
Alternatively I could set the background image on a wrapper div and not on the body. That solves the problem of it leaking into the body margins, but it still has the same problem that it is cut off on scrolling.
(see: http://jsfiddle.net/terraling/3V5rV/1/ )
Any solution that involves removing the height: 100% declaration from any of html, body or wrapper collapses the layout (including replacing with max-height: 100%).
There's a whole lot of problems with this construct and not all of them can be solved, unfortunately.
The background issue
As you have seen yourself the background of body extends to the viewport if html does not have a background. That's solvable.
The float issue
When an element floats it does not contribute to the height of its parent element. So they don't grow (e.g. body does not expand). That can be solved if you can use alternatives. For vertically centering an element you could use display: table-cell e.g., which allows you to vertically center the content.
The height issue
This is where all hope is gone. height: 100% refers to the height of the parent, of course. The parent of body is html which in turn is the child of the viewport. You gave html the size of 100% (= the size of the viewport) and body the size of 100% (= size of html = size of viewport).
So now body has a fixed height and it can't expand meaning the background doesn't expand as well. Now one might have the idea to give body no size so that it can expand. But .page has 100% too. If a parent (in this case body) has no fixed size 100% has no meaning and will be treated as auto, which means as big as the content. And the content has a height of 300px. So the .page elements wouild no longer have the height of the viewport but 300px.
As for the collapse of the CSS, you should either specify the height specifically height:200px; or add padding to the bottom/top of the page so that the content wraps. You can also use min-height:200px; then add the margin-bottom:20px; to separate the pages. I would approach this at a specific height with the wrapper having the specific background-image and bottom-margin.
In order to center your background-image to the <html> you can specify the position as 50%.
This can be done by doing background:url('yourimage.jpg') repeat 0 50%;This will ensure the background is centered.
I have defined a grid with columns widths to fit my desired content.
Say, I then wish to place an element using the grid so I have it span 3 of the 9 columns for an approx width of 33.3%
I then wish that element to be the same height as it's width.
This is the point I always get stuck. If I use Compass Susy's columns() function it sets the height to 33.3% which is exactly what it is meant to do but obviously it's not what I want.
How do people work around this to get the desired outcome?
Kind regards,
Neil
No need for JS. It's possible with a simple HTML and CSS Trick:
HTML
<div class="container">
<div class="item"><div class="content"></div></div>
<div class="item"><div class="content"></div></div>
<div class="item"><div class="content"></div></div>
</div>
Relevant CSS
.container{
position: absolute;
}
.item{
height: 0;
position: relative;
padding-bottom: 33%;
}
.item .content{
height: 100%;
width: 100%;
}
jsFiddle example: http://jsfiddle.net/opherv/hjVSM/
Try to resize to browser and see how it behaves.
The Idea is that you set the width/height ratio using the element's padding-bottom.
Thnanks for your answer #OpherV but #rctneil didn't even mention JS.
He (like me) is looking for a Sass/Susy solution.
Is there any Sass mixin which sets the height of an element which has a dynamic width equal to it's width?