I'm working on building a mobile friendly site of our companies main website. The way it is designed is around 2x for retina. What I'm planning to do is set the main content around a maximum width of 640px, width set at 100%. I have a certain background image that fits nicely do that. But as the width of the div gets smaller, I need the height to adjust as well. Any ideas?
Here's the css:
*{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial, sans-serif;}
body {
margin:0;
background-color:#fff;
}
.top, .body {
max-width:640px;
width:100%;
margin:0 auto;
}
.top {
background: white url(images/top.jpg) no-repeat;
background-size:auto;
overflow:hidden;
height:124px;
max-height:124px;
}
.top ul {
list-style:none;
height:100%;
}
.top ul li {
height:100%;
float:left;
display:block;
}
I did find an answer to this. It adds a little bit of unsemantic markup, but works well.
Can find it here: http://jsfiddle.net/AdQ3P/
The logic is in the padding-bottom. basically this needs to be (img_height / img_width) * 100.
Edit Here's the code, so not dependent on jsfiddle.
<div class="container">
<div class="hero"></div>
</div>
.container {
width:100%;
max-width:500px;
}
.hero {
width:100%;
height:0;
background-size:100%;
background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat;
padding-bottom:75%;
}
Also that was one messy desk i had lol.
You can also use a little jQuery. I believe the advantage is that it is a semantically valid fix, so the next guy who edits your code might have an easier time understanding what's going on.
// Maintain aspect ratio of #my_div
// Set aspect ratio of #my_div
var aspect_ratio = 0.8;
// Store the jQuery object for future reference
var $my_div = jQuery("#my_div");
// Within your document ready function,
// Do an initial resize of #my_div
$(document).ready(function(){
$my_div.height( $my_div.width() * aspect_ratio );
});
// Resize #my_div on browser resize
jQuery(window).resize(function() {
$my_div.height( $my_div.width() * aspect_ratio );
});
while a non-fixed width (e.g. 100%) takes all the container's width, the height of an element when not set to a fixed size will stretch to accomodate any in-flow content (including padding, margin, borders...)
if you can use an <img> tag instead of a background image, you can then apply max-width:100% to the image itself and it will scale to fit the container - the browser will take care of resizing its height to keep the aspect ratio consistent - however replacing a css background with an image tag is not always possible or the best option in terms of semantics and/or any layout issues you may face.
Working very well without a set height or img using the new relative font sizing units, e.g. vm (http://www.sitepoint.com/new-css3-relative-font-size/).
Related
<body>
<div>
</div>
</body>
div {
width:10vw;
height:10vh;
}
Is there any way to set this div that will be 10% of the full available window ? (When the window browser cover all the screen).
Last time I did it with script in JS but I believe nobody does this and only use css.
Instead I can use px but even with media queries I won't know how it will looks like in other screens.
Anoher option: Using max/min-height/width, but still I don't know what value I need to set from avoiding from the div shrinking (every screen is different px) or just let the div shink to some point - but either at this way I don't know how it will look on other screens.
Thanks.
By specifying the min-height and max-width, you'll be able to control its size.
div {
max-width: 10vw;
min-height: 10vh;
}
Empty div elements have a height of 0 by default so the min-height keeps it from shrinking to nothing.
div elements are also display: block; by default, which means the width is 100% of the containing element. Defining the max-width will restrict that dimension of the div.
You should use max-height/min-height/width in percentages.
div {
width:10%;
max-height:10%;
min-height:10%;
position: fixed;
border:1px solid blue;
}
I'm working on a responsive website and I'm coming across a problem. I've a div container which width is 100%, and inside it I've 2 div's sidebar and content. Sidebar is set 40% wide and content is set to 60%.
Now, I want to give 25px space between them and for that I used margin-left:25px;.
Now, what will the width of content in % or is there any formula to calcute?
Here is what I am to do - JSFIDDLE
You could change your CSS to use calc for the width values, you want to subtract 1/2 the amount of the gap in px you want, then add the same amount to the relevant margins:
Demo Fiddle
.container {
background:#ccc;
}
.sidebar {
width:calc(40% - 12.5px);
margin-right:12.5px;
background:red;
height:50px;
float:left;
}
.content {
width:calc(60% - 12.5px);
margin-left:12.5px;
background:green;
height:50px;
float:left;
}
Yes, there is a way to achieve this using calc function.
.content {
margin-left:calc(40% + 25px);
}
But, the disadvantage is that, calc is not cross browser. It won't work in IE.
See updated fiddle here.
I have a div containing an image (img) element, which extends for 100% width inside it. I would like to specify a maximum height for the div, and hide the parts of the image exceeding this height. But I also want to keep this image centered vertically inside the div to show only its central part.
For example, if browser width is 1200px and image aspect ratio is 4:3, image should display (1200x900)px. But if we want to crop height to 300px only and center vertically, image should position at -300px inside the div (and the div should hide 0-300 and 600-900 of the image height). Similar thoughts can be done for other widhts.
I'm pretty sure this can be easily done with javascript, but I would like to know if there is a way to do it with CSS too. Thanks in advance!
My take on this: http://codepen.io/vsync/pen/DpmnK
HTML
<div class='box'>
<img src="http://www.biztalk360.com/Events/BizTalk-Innovation-day-2014-Norway/images/banner.jpg">
</div>
SCSS
.box{
// this is the image container distentions
width:100%;
height:100px;
// The magic
> img{
position:absolute;
z-index:-1;
top:50%;
left:50%;
width:100%;
transform:translate(-50%, -50%);
&.max{ width:auto; height:100%; }
}
}
javascript (this is only for responsiveness)
var photo = document.images[0],
container = document.querySelector('.box');
$(window).on('resize.coverPhoto', function(){
requestAnimationFrame(checkRatio);
});
function checkRatio(){
var state = photo.clientHeight <= container.clientHeight &&
photo.clientWidth >= container.clientWidth;
photo.classList[state ? 'add' : 'remove']('max');
}
You may want to look at this question : Resizeing an oversized image using overflow:hidden and keep the aspect ratio
http://codepen.io/gcyrillus/pen/Grbxg
.grid_3 { width:260px; margin:0 20px; float:left; text-align:center;
overflow:hidden;background:rgba(255,255,255,0.02);}
.grid_3 a {
display:block;
height:171px; border:solid 2px #FFFFFF;
line-height:168px;
overflow:hidden;
margin-bottom:10px;
}
.max-img-border { width:100%; margin:-100% 0;vertical-align:middle;
}
here is another pen , exploring this , vertical-align:middle and an image with virtually no height in the flux.http://codepen.io/gc-nomade/pen/DxCgv
Of course , image set in background center is easy if it has no meaning in your content.
So you want the div to function as a viewing window for your image? This sounds like image sprites (a large pic of icons put together where each icon is displayed individually) but with a larger image:
http://www.w3schools.com/css/css_image_sprites.asp
If you provide a JSFiddle, I can give you something more specific.
I realise this question has been asked multiple times in differently worded titles and options, but i have yet to find something that works for me.
Im trying to have an img fill most of the screen (keeping its aspect ratio) without overflowing the edges. (Basically what the firefox browser accomplishes when viewing an image)
Most that i've tried either works in only one direction ie. width will resize but will end up overflowing the height and the same for the other way, either with CSS or JScript. Also playing a factor in my trouble is that i want to aplly this to both portrait and landscape images (More or less any image i have on the site)
This seems like it should work using pure CSS but doesnt (im not completely knowledgeable in all CSS though):
Link to JSFiddle
body, html {
margin:auto;
padding:6px;
height:100%;
width:100%;
}
img {
max-width:100%;
max-height:100%;
}
There are a hand full of other scripts as well, but this post is getting a bit long.
Could anyone help me out containing my images within the screen, with either JQuery or CSS (within or without a DIV)
Thanks in advance,
Try this jQuery plugin: TailorFit
and check out the demo.
You can play around with various options in the demo to figure out if this could work for you. The browser support is extreme because it only uses jQuery and relative positioning.
Full disclosure - I'm the author of the plugin.
Now define your html, body height 100%;
as like this
body, html {
height:100%;
}
MY ANSWER:
I ended up just wrapping the image in a div and setting the div dimensions in CSS:
PURE CSS Resize
Unfortunately this method may look quite horrible in older browsers but it has atleast got me out of a pickle and its a tiny piece of styling.
Hopefully i can find some jQuery alternative soon.
body, html {
width:98%;
height:98%;
}
.outer {
position:fixed !important;
position:absolute;
margin:auto;
text-align:center;
top:10px;
right:0;
bottom:10px;
left:0;
}
img {
max-width:100%;
max-height:100%;
padding:4px;
background-color:#fff;
}
----
<div class="outer">
<img src="whatever.jpg" />
</div>
I've looked at other solutions, however they're not working for me. I've tried height: 100% on my sidebar and that's still not doing the trick. Could someone please point me in the right direction? I'd like the color of the sidebar to extend the entire length of the page.
HTML: http://lrroberts0122.github.com/DWS/lab3/index.html
CSS: http://lrroberts0122.github.com/DWS/lab3/css/main.css
Ok I'll try to explain little more here:
When you set height:100%; in css you have to ask yourself - "100% of what?" - ... Well this depends on how you set the element's position. When you set position:absolute; then it'd be 100% of user's browser view otherwise it'd be 100% of the element's parent height. Thus if you ain't setting a proper height or an absolute position somewhere you'll just get 100% of nothing which is nothing (which rolls back to default content-adjusted height).
So let's for a moment consider making parent div's position absolute and setting it at 100% height (so that your relatively positioned children sidebar will get the same height if its height is set to 100%). HERE A FIDDLE - Now let's see what we have: we have a parent div(yellow) as high as the user's browser view, but its height is fixed and won't change to fit the content, then we have a sidebar(red) matching its parent's height (thus its height won't fit the content eather), finally we have a long content text(transparent bg) which clearly overlaps the parent div's height and lands in the middle of nowhere. Not good...
What can we do? (doesn't seem setting parent's overflow to scroll is a good idea) ... we need to watch the problem in the right way : you basically have two sibling divs and you want them to fit their content height well, but at the same time you want one of them to keep its sibling's same height -> no easy peasy css solutions for that (that I know of).
Finally my suggestion is to use a little jquery: here a fast setup and here the full site. Now just write:
var height = $('.content').height()
$('.sidebar').height(height)
and it'll work just fine. Notice I left the absolute position for the parent and set it to 100% height, but didn't set any height for the sidebar which now fairly matches the actual size of the content panel.
Hope this helps
#Onheiron, your post was extremely helpful. Thank you!
I added a line to my code because I noticed that short content pages did not extend all the way to the bottom of the page and caused the sidebar to stay short as well. Now the script checks to see what one (.content or body) has a greater height and then applies the same height to the .sidebar.
HTML:
<body>
<div class="sidebar"></div>
<div class="content"></div>
</body>
JavaScript:
$(document).ready(function () {
var height1 = $('.content').height()
var height2 = $('body').height()
if (height1 > height2) {
$('.sidebar').height(height1)
} else {
$('.sidebar').height(height2)
}
});
CSS:
body, .sidebar {
height:100%
}
Then lose the else part of the if statement as it will default to the css. No need for the script if the .content area is a lesser height than the body.
height:100% should work fine, but you have to make sure you make the containing div 100% as well.
#main-content {
background: url("../images/diagonal-noise.png");
}
#content {
background-color: #FEFEFE;
width: 920px;
margin-left: auto;
margin-right: auto;
border-left: 25px solid #79879E;
border-right: 25px solid #79879E;
padding: 20px;
height:100%;
}
#secondary-content {
background-color: #CED6E2;
width: 200px;
float: left;
border-right: 1px dotted #79879E;
padding: 10px;
margin: 10px 20px 10px -20px;
height:100%;
}