I have a image that have 1200 x 200px. On center of this image I have a space with 500 x 200px that is the main content of full image. On each side of this image, I have an additional content. Note: it is on a single image.
If the window width is reduced, then first it should consumes the additional content of the image, but cutting it, keeping image height intact. But if I reduces the window width below of the main content width (in this time, all additional content was cutted off), then now the image should be resized proportionally, affecting the height.
My doubts:
Is possible do it only with CSS?
If not, there are some JS library to do that?
If not, how I should structure the HTML, CSS and JS to do it works?
It's an example banner with full width: Note that is have a main content and two sides with additional content.
This image below should help understand: I tried to simulate a window width resize, on 1200 px, 1000 px and 500 px (that not affect height yet) then by 350 px (that affect and resize image proportionally).
#banner {
background-image: url("http://i.stack.imgur.com/csRha.png");
width: 100%;
height: 200px;
background-repeat: no-repeat;
margin: 0 auto;
display: block;
border: 1px solid red;
}
#media all and (min-width: 1200px) {
#banner {
width: 1200px;
}
}
#media all and (max-width: 1200px) {
#banner {
background-position: 50% 0;
}
}
#media all and (max-width: 500px) {
#banner {
background-size: 240%;
}
}
<div id="banner"></div>
Is possible do it only with CSS?
Yes, and you only need 1 <div>. Treat the image as a background image, positioned dead center with background-position. Then resize the <div> using media queries, setting widths to the designated breakpoints.
You might use a simple media query like this:
#media max-width: 500px {
#your-image {
width: 100vw;
}
}
Use media queries for adding images/elements and changing css.
As for your problem use percentages for re-sizing images.
I suggest to look up progressive enhancement and Responsive design.
Also look up view-port in case you are not using it.
Don't use VW there is not enough support yet in IE,EDGE(no support for VMAX) and Opera mini, ie8 (no support at all).
Related
My HTML and CSS elements are moving around depending on the screen size or zoom of a page. I have screenshots of this example.
This is what it ends up looking like
What it SHOULD look like
If your HTML and CSS elements change with the screen size you can either write media queries or try putting your CSS in terms of percentages rather than pixels. For instance given this CSS code:
.some-class {
width: 300px;
padding: 25px;
margin-top: 10px;
}
All of those measurements in px are going to look very different on a phone screen vs a laptop screen because 300px is about 1/2 the width of a phone screen but only about 30% of a laptop screen. Rather than specify width in px, we can say we want some-class to take up a certain percentage of the screen like this:
.some-class{
width: 30%;
}
Or like this:
.some-class{
width: 30vw;
}
For the padding and margin we can write a media query, which changes the CSS according to screen size. Assuming our original code is for a laptop and we want to make it fit on a phone screen we can add the following to our CSS stylesheet:
#media screen and (max-width: 480px;){
.some-class {
padding: 15px;
margin-top: 5px;
}
}
This overwrites the original CSS if it detects a screen smaller than 480px across. It's worth knowing how to write media queries anyway in case something that is horizontally aligned on a laptop should be vertically aligned on a phone so here's a helpful link.
https://www.w3schools.com/Css/css3_mediaqueries_ex.asp
I am trying to create a foreground image (not background) that covers the entire viewport. When the page is resized or viewed on a smaller device I want the most important part of the image to be centered with any part that doesn't fit in the window cropped on its width (not its height). To clarify lets assume that this represents the horizontal pixels in a 10 bit pixel wide image that I want to center on pixel #7.
|0123456789|
displayed on a wider screen might be:
|0 1 2 3 4 5 6 7 8 9| (still encompassing the entire screen)
resized for a smaller screen:
|123456789|
|23456789| <-- Even smaller screen
|3456789| <-- Even smaller screen
|456789| <-- Even smaller screen
|45678| <-- Even smaller screen
|5678| <-- Even smaller screen
|678| <-- Even smaller screen
|67| <-- Even smaller screen
|7| <-- Even smaller screen
In this example the entire picture shows when the screen is large enough to display the entire picture. But when the screen shrinks, it should properly crop (mostly from the left) in order to make sure that #7 is always displayed with proportional movement towards the center of the screen. How can I do this? CSS, javascript and JQuery must be able to handle this.
edit, since it is foreground :
the idea here is to use line-height, text-align , min-height, min-width and negative margin to crop the image: average result below in snippet or codepen
html {
height:100%;
}
body {
text-align:right;
line-height:100vh;
height:100%;
}
img {
min-width:100%;
min-height:100%;
margin:-50% 0 -50% -240% ;
vertical-align:middle;
}
<img src="http://dummyimage.com/600x200&text=123456789" />
from my comment:
html {
min-height: 100%;
background: url(http://dummyimage.com/600x200&text=123456789) 73% center no-repeat;
background-size: cover;
}
the idea is, once page resized, the last number to be seen is 7.
You need to run the snippet in fullpage or play with the codepen liked earlier : http://codepen.io/gc-nomade/pen/jqjdrp
Think you're just looking for background-position: center?
/*.with-bg-size*/ html {
background-image: url('http://placehold.it/1600x1600');
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
}
<div class="with-bg-size"></div>
keep aspect ratio of image for responsive
div:before {
display: block;
content: "";
width: 100%;
padding-top: (16 / 9) * 100%;
}
I'm looking at this 3 fixed-column CSS layout on http://www.vanseodesign.com. I want to use this layout however I'd like to change the way it behaves when I resize the browser.
When the browser is open nice and wide the columns are centered nicely on the page:
Then we reduce the width of the browser and it locks to the left side of the left-most column like this:
What I'd like to do is change the CSS (or javascript if necessary) so that the browser locks to the left side of the middle column instead when the browser becomes too narrow:
I'm not sure how to achieve this though?? Can anyone suggest how to change the code and most importantly why your solution works?
EDIT:
For those reading this question: I marked Salem Ouerdani's answer as the correct one because he was the first to answer with a solution that worked the particular way I wanted. However, it became clear that people were interpreting the question in slightly different ways. So it is worth reading through because there are some really great answers which might suit your situation better. Please upvote them as such.
Try to modify your container div from this :
#container { width: 960px; margin: 20px auto;}
to this :
#container {
width: 960px;
margin: 20px auto;
position: absolute;
left: 50%;
margin-left: -480px; /* half the fixed width */
}
EDIT :
Also you need to add this in order to lock to the left side of the center div whenever your browser size is beyond the fixed 960px :
#media (max-width: 960px) {
#container {
left: 0;
margin-left: -240px; /* Primary Sidebar width */
}
}
UPDATE : As #media (max-width: 480px){} did better solve the issue rather than 960px then I'm adding the related code pen example with the final solution : >> Codepen sample code
Revised Solution (based on OP comment)
Solution by #spenibus is the best and I recommend that. The solution does not work with browsers <= IE9 (IE9 only partially supports it). If you wish to make it cross browser compatible, then I suggest using javascript to manually set the scroll.
Fiddle: http://jsfiddle.net/dp7gwcn5/4/
$(function () {
$(window).resize(function () {
var width = $(window).width();
if (width <= 960) {
if(width <= 480) $(document).scrollLeft($('#content').offset().left);
else $(document).scrollLeft((960-width) / 2);
}
});
});
Old Solution
Solution #1 (Scroll: Do not hide anything, just cling)
If you wish to keep the sidebar still accessible by scrolling but only make the browser's left edge stick to the left edge of your main content #content. Then manipulate the scroll
Fiddle: http://jsfiddle.net/dp7gwcn5/. The fiddle will let you change the size of your preview window, as soon as you shrink it enough to hide the secondary sidebar the window clings to the left edge of #content
$(function(){
$(window).resize(function(){
if ($(window).width() < 720) {
$(document).scrollLeft($('#content').offset().left);
}
});
});
Note: The width 720 was given based on the widths you have set on your sidebars and conents, you can modify it to be calculated on the fly if you wish.
Solution #2 (Static: Hide primary sidebar)
If you wish to hide the primary sidebar then simply use a media query to hide the primary sidebar when your window size is small
Fiddle:http://jsfiddle.net/dp7gwcn5/1/
#media all and (max-width:720px) {
#primary {
display:none;
}
#container {
width:720px;
}
}
Solution #3 (Dynamic: Hide primary sidebar)
Solution #2 is static and there is not much you can do about it, however, if you wish to compute the widths on the fly and hide the side bar, use a script
Fiddle: http://jsfiddle.net/dp7gwcn5/2/
Script
$(function(){
$(window).resize(function(){
if ($(window).width() < 720) $('#container').addClass('small');
else $('#container').removeClass('small');
});
});
CSS
#container.small {
width:720px;
}
#container.small #primary {
display:none;
}
My Suggestion
My suggestion is to use Solution #1 if you do not wish to make it mobile compatible. If you wish to make it mobile compatible I suggest using Solution #2 with a menu button to show your primary sidebar.
Note: Solution #1 and Solution #3 will work on most browsers. Solution #2 will not work on browsers < IE9
Update 2015-08-03 01:59 +0000
Reading your comment on another answer about staying centered until the left edge of the centered column meets the browser edge made things much clearer.
This will keep the middle column centered until the browser is as large as the column, then it will stick to the left edge of the column.
html, body {
margin:0;
padding:0;
}
#media (max-width: 480px) {
#container {
margin-left:-240px;
}
}
#media (max-width: 960px) and (min-width:481px) {
#container {
margin-left:calc( (960px - 100%) / -2 );
}
}
Original anwser
Pure css. The values of "960" and "720" should be adjusted to account for body margin. Works under Firefox, no guarantees elsewhere. Using calc() for adaptive negative margin based on browser width.
/* fixed negative margin below 720px width */
#media (max-width: 720px) {
#container {
margin-left:-240px;
}
}
/* adaptive negative margin vetween 720px and 960px width */
#media (max-width: 960px) and (min-width:721px) {
#container {
margin-left:calc( (960px - 100%) * -1 );
}
}
Preview
From what I can see, this template uses the margin 0 auto in the container. The way the margin is set up, it centres the "container" which contains all three columns. This means that the content is currently centred by treating each of the three columns as one big one.
This layout is also not responsive. This means that it does not adapt to larger or smaller browser sizes. It has a fixed width and height.
A simple solution is to change the pixel units to %. This will create a fluid layout that will adapt more easily to the browser size as the measurements are based on a portion of the window size instead of having a fixed size.
For example:
body {
width: 50%; }
No matter what size the browser window is, the body will only account for half the size.
If you are looking to have all three columns visible in the exact same layout or just visible in the browser without scrolling to the side no matter what device or screen size, then you need to use media queries. Media queries are css properties that let you set specific css styles for specific resolutions or screen sizes.
For example:
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
#media screen and (max-width: 600px) {
body {
background-color: purple;
}
}
In my example (although very rough), the background of the body will be purple up to a small size of 600px. It will then change to blue until a size of 300px.
You can read more about media queries here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
1 - remove the margin from your BODY CSS.
2 - wrap all of your html in a wrapper ... all your body content
3 - Define the CSS for the wrapper:
This will hold everything together, centered on the page.
#conatiner{
margin-left:auto;
margin-right:auto;
width:960px;
}
.container {
max-width: 960px !important;
margin: 0px auto;
position: relative;
}
it will work definitely .
html, body
{
overflow: scroll !important;
ms-overflow-y: auto;
float: none !important;
overflow-y: auto;
overflow-x: visible;
}
try this in css
or in script use
function enableScrolling()
{
document.body.scroll = "yes";
document.body.overflow="hidden";
}
#media(max-width : 960px)
{
#primary{width:0;}
#content{width:66.7%}
#secondary{width:33.3%}
#container{width:100%}
}
Hope this will work for you.
You can do this easily with media queries
At the bottom of your CSS, just add something like:
#media screen and (max-width : 960px) {
#container {
margin-left: -260px;
}
}
When the window size becomes less than 960px, it will shift the container to the left by the width of the left column, leaving it fixed on the left side at the middle column
Here is a fiddle: https://jsfiddle.net/Locwv54q/
EDIT:
With the addition of CSS transitions to make things smoother you can use something like this
At the bottom of your CSS add a media query:
#media (max-width : 960px) {
#container {
left: 460px;
margin-left: -700px;
}
}
Then during the definition of container earlier in the CSS, use something like this:
#container {
position: absolute;
left: 50%;
width:960px;
margin-left: -480px;
margin-top: 20px;
margin-bottom: 20px;
-webkit-transition: margin-left 1s ease-in-out;
-moz-transition: margin-left 1s ease-in-out;
-o-transition: margin-left 1s ease-in-out;
transition: margin-left 1s ease-in-out;
}
Of course can fiddle with the values/timings to get things exactly as you want, but this general approach works on my end
updated jsfiddle: https://jsfiddle.net/8L5n58jy/
EDIT2:
This should now work as intended
#media (max-width : 480px) {
#container {
margin-left: -240px;
left: 0px;
}
}
#container {
position: absolute;
width: 960px;
left: 50%;
margin-left: -480px;
margin-top: 20px;
margin-bottom: 20px;
}
I would suggest to always center the #container with
position: absolute;
left: 50%;
transform:translateX(-50%);
Then when it will only fit the center column and 1 column (max-width: 720px) you fix the position:
#media (max-width: 720px) {
#container {
left:240px;
transition: left 2s;//make it smooth
}
}
A plus for the crazy tab resizers would be to add transition to animate the change transition: left 2s; (but thinking about 'normal' users it may not be necessary)
fiddle
You should definitely read about Twitter-Bootstrap framework, bro:
<div class="container">
<div class="row>
<div class="col-sm-3">
<h2>Left</h2>
</div>
<div class="col-sm-6">
<h2>Center</h2>
</div>
<div class="col-sm-3">
<h2>Right</h3>
</div>
</div>
</div>
would do your work, as it is RESPONSIVE. Just saying!
Why not use Bootstrap to create the columns and use the col-sm- or the col-xs- to pull the middle container into place?
Here is the example at the Bootstrap Website
I'm quite new to web-design, but know most of the basic stuff, but please try to keep it relatively simple) So, I'm designing a web-site, where I want to have grey background on the sides of the main page, which I managed to do. However, I want the page to "eat up" the grey space if the window is resized, just like Marriott hotel uses I have tried looking their code up, but it's a lot and I don't think they use CSS but JavaScript for resizing dynamics. Am I right? If so, is there a way of doing it with CSS? Or java, but relatively simple, I'm very new to it!
Also, I have currently given the wrapper a width of 88% and used the 12% as the grey background. Is using % the best solution for different screen resolutions? (Keeping in mind that it would be for PCs and tablets at the most, no smartphones)
Using percentages can be useful, but if you truly want things to look how you want them to on a smaller screen resolution, you can use media queries.
Media queries work well because they can even change the styles depending on device orientation:
#media (min-width: 700px) and (orientation: landscape) { ... }
Using a media query. (Make the window bigger & smaller to see it in action.)
I think what you want is the following:
Add a background to the body.
Add a div with X px and margin auto, that will center it.
So then, when you resize the window, this will "eat" the margins from the body hidding the grey background.
If what you want is different sizes for the web depending on the width screen, then you are entering to media queries.
You are looking for:
#wrapper { width: 900px; margin: 0 auto; }
This will place your wrapper (with a 900px width) with even margins on the side and then recalculate the margins as the window changes.
I would give your wrapper a set width since setting a width of 88% means that the center content will ALWAYS be 88% of the window which means you will always have margins.
You may do it this way
here is the fiddle: http://jsfiddle.net/fcvbkv5w/
body {
text-align: center;
}
#navbar {
width: 100%;
margin-left:0%;
background-color: black;
text-align: center;
}
#fwcenter {
width: 70%;
position: relative;
text-align: center;
background-color: red;
}
#media (max-width: 700px){
#fwcenter{
width:100%;
}
}
<div id="navbar">
<center>
<div id="fwcenter">
<div id="container">
Website content
</div>
</div>
</center>
</div>
OK, here was my original question, where I've left out the most important thing: to horizontally center the image, if the screen is bigger than max-width.
So far the classic trick for margin: auto doesn't work, because then width: 100% isn't the screen anymore.
#main {
margin: 0 auto;
width: 1024px;
background-color: red;
}
#bigimage {
max-width: 1024px;
width: 100%;
}
<div id="main" role="main">
<img src="img/bigimage.jpg" id="bigimage">
</div>
So I'm looking for an other solution. Any idea how to make max-width and horizontal centering work together?
Update:
OK, I'm almost there:
#main {
width: 100%;
text-align: center;
}
#bigimage {
max-width: 1024px;
width: 100%;
}
And it works great in all browsers, except IE8. Even IE 7 is OK! IE8 resizes the image without keeping the aspect ratio! I mean it makes it max-width wide but original width high. Can you help me how to make it not distort in IE8?
Also, a live site, with 500px max-width:
http://ilhaamproject.com/
Change your (updated) CSS to the following and it should work:
#main {
width: 100%;
text-align: center;
}
if your image have an static aspect ratio then it can be done with max-height. If you add max-height to your image based on the 1024px width (726px for 4by3 aspect ratio) then it would be fine in every browser. See the fiddle before applying max-height and after that. I just used 400px width instead.
HTML:
<div id="container">
<img id="bigDude" src="http://www.ladygagapic.info/wallpaper/flower-17.jpg" />
</div>
CSS:
#container{text-align:center; border:1px solid gray;}
#bigDude{max-width:400px; width:100%;}
BUT if your images are not in same size or aspect ratio you maybe need some JavaScript just like how Facebook forced to do that.
You have the #bigimage img within the #main div. Since the main div is 1024px wide, the 100% will always be 1024. The result here is that you'll always see 1024px. If you remove the width attribute from #main or change it to 100%, you should start to see what you're looking for.
Demo
I ended up opting for display:table-row ... oh well :P