I'm fairly new to CSS and having trouble with scaling a picture.
I have a series of images (that I do not control) that are part of a slide show. Up until now, the images I received were all of a fairly standard size. I used a style on the image element to size these to 85% of the visible window's height.
.image{
top: 5vh;
height: 85vh;
width: auto;
margin: auto;
position: absolute;
left: 10px;
right: 10px;}
This is inside a div that just has:
margin-left: auto;
margin-right: auto;
this has worked fine. The problem is that I just received an image that is quite wide, causing it to overlap content that sits left and right of the image. I tried putting a max-width on the image style
max-width:85vw;
However, that caused the image to distort.
Is there a way that I can implement the following? "Size the picture at 85% of the height of the viewport but do not exceed 85% of either dimension and don't distort the picture."
Edit
As I noted below, hiding the overflow didn't appeal to me. I eventually got what I wanted with the following modifications to the code above.
.container
{
margin-left: auto;
margin-right: auto;
}
.image
{
top: 5vh;
max-height: 85vh; /* this */
max-width: 85vw; /* and this */
width: auto;
margin: auto;
position: absolute;
left: 10px;
right: 10px;
}
Related
I'm trying to solve the problem showed on the picture.
I have a site of a width of 980px (margin:auto) centered in the middle of the page and I need surrounding background of a width of 400px each side. But when user narrows the width of the browser the background shouldn't affect horizontal bar (only the width of the page itself 980px)
Plus there's an image which is placed 80% in the main page and the rest outside of the page. I also want this piece of the image (20%) not to affect the horizontal bar when user narrows the width of the window.
THANKS!!!
image:
http://tinypic.com/r/ri58io/8
code: link to fiddlehttps://jsfiddle.net/c0ro66s4/
The thing with this design is that the 'background' boxes have a fix width. When the fill the rest of remaining width (next to the content) no scrollbar appears (at least, not in Firefox).
So what I've did is made a media query. When the screen size is bigger than (980+400+400=) 1780px the boxes will have their normal width. As soon as the screensize becomes under the 1780px, the width will be set to auto and we use the 'left' position, which makes them fill the screen and won't show the scrollbars.
I made the testcase in JSFiddle with half the sizes (otherwise it wouldn't fit on my screen).
<div id="content">Content</div>
<div id="bgLeft"> </div>
<div id="bgRight"> </div>
body, html { margin: 0; padding: 0; min-height: 100%; }
#content {
background: lightblue;
position: absolute;
width: 490px;
height: 100%;
left: 50%;
margin-left: -245px;
}
#bgLeft {
background: lightgreen;
position: absolute;
width: 200px;
right: 50%;
margin-right: 245px;
height: 100%;
}
#bgRight {
background: lightgreen;
position: absolute;
width: 200px;
left: 50%;
margin-left: 245px;
height: 100%;
}
#media screen and ( max-width: 890px ) {
#bgLeft {
width: auto;
left: 0;
}
#bgRight {
width: auto;
right: 0;
}
}
Set the image as background in both boxes and a align the one in the left box on the right and the one in the right box on the left.
DEMO
EDIT
Added your background-images: DEMO 2
I want a DIV insider another one (which I don't want to change for some reasons) to be
centered horizontally
width: 70%, but not more than 800px and not less than 300px
height: 100%, but 50px margin at the top, and 20px margin at the bottom
displayed correctly with IE9+, modern desktop browsers and iOS 6+ Safari
I could get it working for all properties but the height using this CSS ("child" is target DIV):
#child{
width: 70%;
height: 100%;
max-width:800px;
min-width:300px;
margin-top:50px;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
display:block;
}
The height margins are respected, but the content is stretched, and so a scroll bar appears, what want to prevent.
Please see a full example at this Fiddle.
Do you have any idea how this could be fixed?
I know that there are many questions about "how to achieve 100% height and margins", but I didn't find one that considered a variable width.
That's because the margins are added to the height of the element.
I updated the fiddle by adding padding to the parent and removing margin to the child.
I also used the box-sizing property to make it take the padding into account when computing the height of the parent :
#parent{
width: 100%;
height: 100%;
padding-top: 50px;
padding-bottom: 20px;
box-sizing: border-box;
}
http://jsfiddle.net/u6we2axp/2/
You can use absolute positioning to get the height right:
#child {
position: absolute;
top: 50px;
bottom: 20px;
left: 0;
right: 0;
width: 70%;
min-width: 300px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
This requires adding position: relative to #parent but if it is the only child of the body then you can avoid it. This takes care of the which I don't want to change for some reasons part of your question.
Demo Here
I am designing a web page with a little toggle menu icon for navigation purposes.
My problem is that whenever the window is resized under the width of the main container (.story, which only has max-width defined), the menu icon overlaps the content.
Instead, I would like the icon to block on the right border of my container.
currently, the code for positionning my nav icon:
nav {
position: fixed;
top: 100px;
right: 100px;
}
and the container:
.story {
padding-top: 50px;
margin: 0 auto;
height: 1000px;
max-width: 1000px;
text-align: justify;
}
Here is a jsfiddle to illustrate my problem.
and here is an example of a website where they made it work
Thanks for taking a look at it.
Per my understanding, position:fixed will overlap data.
A simple way can be reducing width of story div.
nav css
nav { position: fixed; top: 20px; right: 20px; }
story css
.story {
padding: 50px 0;
margin: 0 auto;
height: 1000px;
max-width: 400px;
text-align: justify;}
I have found this vertical centring method which seems pretty common..
#container {
width: 960px;
height: 740px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -480px;
margin-top: -370px;
}
What I'm trying to center here is the entire site, and this code goes perfectly as expected when the screen preview is larger than the div height (larger than 740px). However, Once the browser window is minimized less than div's vertical size (740px) parts of the header disappear above the top of the page.
I can sort of understand why this is happening seeing that 50% becomes less than half the div's size which will be equalized with margin-top.
What I'm looking for is a fix for this issue? Or even a completely different method, I just need to center the site both vertically and horizontally.
try this:
#container {
height: 740px;
width: 960px;
position: absolute;
margin: auto;
top: 0; right: 0; bottom: 0; left: 0;
}
By the way, Smashing Magazine recently published a nice article about this.
You need to add a media query:
#media screen and (min-height:740px) {
#container {
top:0;
margin-top:0;
}
}
This will only apply the formatting where the screen is at least 740px tall. If you want to learn more about media queries, check http://www.w3.org/TR/css3-mediaqueries/
Absolute Centering like Lino Rosa mentioned is the best approach here for easy horizontal and vertical centering while allowing you to add some responsive touches, like fixing your height issue.
Ideally, you should be using percentages for the width and height declarations so that your content will vary with the viewport. Of course, sometimes you just need pixels :-)
Here's what I've done:
.Absolute-Center {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
#container {
width: 960px;
max-width: 90%;
height: 740px;
max-height: 90%;
overflow: auto;
}
By setting a max-height and max-width, the box will never be more than 90% of the container (in this case, the browser viewport) even if it's less than 960px wide or 740px tall, so even small screens see a nice centered box. overflow: auto ensures that if the content is longer than the box, the user can scroll in the box to see the rest.
View the demo
If you must have the box exactly 960px by 740px no matter the screen size (forcing the user to scroll around to see all of the content on a small window), then only apply the Absolute Centering styles to #container using a media query, like so:
#container {
width: 960px;
height: 740px;
overflow: auto;
margin: auto;
}
#media screen and (min-height:740px) and (min-width: 960px) {
#container {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
}
View the demo
I encountered the same issue. As the height of my element is dynamically changed, I can't give it a fixed height.
Here is a demo below, hope it helps.
.wrapper {
display: table;
height: 100vh;
width: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
background-color: lightblue;
}
.content {
width: 30%;
height: 30%;
background-color: red;
}
<html>
</html>
<body>
<div class="wrapper">
<div id="container">
<div class="content">
</div>
</div>
</div>
</body>
I've created a banner for my website that's made up of 3 iPhone images side-by-side, using background images and relative positioning for each. However, I'm having issues with the horizontal scrolling. That is even though the div's containing each iphone image extend beyond the width of the parent .content div, I don't want there to be a scrollbar when the overflow content isn't able to fit the browser width. Scrollbars should only be shown if the browser width is below 960px.
A similar effect is presently seen on Apple's homepage, where the hand/wrist reside "outside" the website's container, but no horizontal scrollbars are visible unless the browser's width is below 990px wide.
I hope I've explained this clearly, please let me know if it's not clear.
Here's the code I'm using:
<div class="content">
<div id="iphone-a"></div>
<div id="iphone-b"></div>
<div id="iphone-c"></div>
</div>
.content {
margin: 0 auto;
width: 960px;
height: auto;
text-align: left;
overflow-x: visible;
}
#iphone-a {
z-index: 1;
position: relative;
left: 50%;
bottom: 0;
margin-left: -306px;
height: 657px;
width: 590px;
background: url(images/banner.png) 0px 0px;
}
#iphone-b {
z-index: 0;
position: relative;
top: -545px;
left: 50%;
margin-left: -732px;
height: 319px;
width: 590px;
background: url(images/banner.png) 0px -658px;
}
#iphone-c {
z-index: 0;
position: relative;
top: -864px;
left: 50%;
margin-left: 144px;
height: 319px;
width: 590px;
background: url(images/banner.png) 0px -658px;
}
change
overflow-x: visible;
in .content to
overflow-x : hidden;
Edit : If that's not what u mean, and u just want visible to work correctly try using overflow instead of overflow-x