I'm trying to restrict the height of images within a table. The reason for the table is to allow these images to be aligned vertically and horizontally to the center of the page. The problem I have is that images larger than the browser height disappear of the bottom of the page enlarging the table, I'd like the image to have max-height:100; and scale to fit. It works with the width, but not the height.
Here's what I have so far...
<div id="table">
<div id="cell">
<img src="image.jpg"/>
</div>
</div>
and
html, body{
height:100%;
margin:0;
padding:0;
}
#table{
display:table;
height:100%;
width:100%;
}
#cell{
display:table-cell;
vertical-align:middle;
text-align:center;
background-color:#ccc;
}
img{
max-width:100%;
max-height:100%;
}
You can achieve this without using a table. Here's the basic outline, HTML:
<body>
<img src = "image.jpg"/>
</body>
CSS:
html, body {
height: 100%;
width: 100%;
}
body {
position: relative;
}
img {
position: absolute;
margin: auto; /*make sure it's centered both vertically and horizontally*/
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
}
And a little jsFiddle demo: little link. Note that body must have position: relative; for this to work.
I hope this helped!
Related
for clarity, see codepen: http://codepen.io/anon/pen/QyaLPb
I want to create an image with an overlay. The overlay should be the same size as the image, however because of the width: 100% and height: auto for both the .imagecontainer and img, they don't have the exact same height. The overlay now has a few pixels more height than the img. You can see the .imagecontainer has more height than the img inside (red background showing at the bottom). I need the imagecontainer and img to be responsive, so setting a fixed height is not really an option. How do I solve this?
HTML:
<div class="wrapper">
<div class="imagecontainer">
<img src="http://www.kleinewolf.nl/uploads/fancybox/8f5b7a59-32b7-4582-868b- e2ff1f3e41a2/2835832130.jpg">
<div class="overlay">
</div>
</div>
</div>
CSS:
.wrapper{
width: 400px;
padding: 40px;
}
.imagecontainer {
width: 100%;
height: auto;
overflow: hidden;
background: red;
position: relative;
}
.imagecontainer img {
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.8);
display:none;
}
.imagecontainer:hover .overlay {
display:block;
}
If you're speaking of the red border below the image.
Add to your .imagecontainer img: display: block. That should solve the problem...
http://codepen.io/anon/pen/QyaWNE
Added line-height:0; to your container div. Images contained by parent divs usually tend to take margins from other elements, and line-height and font-size are usually a problem. Good luck!
I have a sidebar, which I would like to be positioned completely to the right of the body, no matter how zoomed in the screen is. So if the screen is at 100% zoom, it should be lined up with the right border of the screen, but the more I zoom in, it should slowly be hidden as it moves rightwards along with the right border of the body.
How can I accomplish this? As my code is now, the sidebar stays perfectly aligned with the screen's right border no matter how much I zoom in. So if I zoom in and then scroll right, a large amount of white space is revealed between the sidebar and the right border of the body.
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
#sidebar {
position: relative;
right: 0%;
}
Ok, so, with only this :
CSS:
body, html {
width: 100%;
height: 100%;
background:blue;
}
#sidebar {
position: relative;
right: 0%;
}
HTML:
<div id="sidebar">Test</div>
The sidebar CAN'T BE on the right side of the page. It's impossible. To make it stick on the right side of the window you need it like this :
CSS:
body, html {
width: 100%;
height: 100%;
background:blue;
margin:0;
padding:0;
}
#sidebar {
position: absolute;
right: 0;
background:white;
}
See jsfiddle:
BUT I GUESS THIS IS WHAT YOU ARE LOOKING FOR:
If you want this to be a sidebar and still have it positioned relative, you need a main content, and a wrapper. See this jsfiddle.
CSS:
body, html {
width: 100%;
height: 100%;
background:blue;
margin:0;
padding:0;
}
#wrapper{
width:300px;
height:auto;
margin:0 auto;
position:relative;
padding:0;
}
#content{
width:200px;
height:auto;
float:left;
padding:0;
margin:0;
background:yellow;
}
#sidebar {
width:100px;
height:auto;
position: relative;
float:left;
padding:0;
margin:0;
background:white;
}
HTML:
<div id="wrapper">
<div id="content">CONTENT</div>
<div id="sidebar">SIDEBAR</div>
</div>
I took a wild guess on the last one thinking this is what you will want to end up doing. In this, even if you zoom/shrink your window and you scroll right, you will see the blue background all the way. No white areas.
I think you want
html { height: 100%; min-height: 100%; }
body { min-height: 100%; }
I am trying position 2 or more images on top of another, so I have been testing the following code
#wrapper div{
width: 100%;
}
#header div{
width: 100%;
clear: both;
}
#content div{
position: relative;
overflow: scroll;
}
#image1
{
width:100%;
top: 0;
z-index:2;
position: absolute;
left: 0;
}
#image2
{ margin-left:3px;
position: absolute;
left: 25%;
top: 150px;
z-index: 3;
}
#footer div{
width: 100%;
float: left;
clear: both;
}
<div id="wrapper">
<div id="header">
<h3>Testing Header</h3>
</div>
<div id="content">
<img id="image1" src="http://i.stack.imgur.com/dgg87.png" />
<img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />
</div>
<div id="footer">
<h3>Testing Foorter</h3>
</div>
</div>
However the header and footer wont show up, I am not sure if I must float something or clear it, I have been testing this on jfiddle and in my own server and nothing, the image tags fill the page, can anyone please show me how to solve this.
Change your CSS rule:
#content div{
position: relative;
overflow: scroll;
}
to:
#content {
position: relative;
overflow: scroll;
height:500px;
}
jsFiddle example
First, #content div isn't being applied to anything since it's looking to select divs within #content which don't exist. By removing the div part of that rule, you apply relative positioning to the content div which allows the absolutely positioned children to be positioned relative to the content container, not the entire page, as what was previously occurring.
Then you can specify a height of the content div as needed.
You can just refer to your header,content and footer as #footer #header #content. There is no need to specify the div tag after them in the css.
Edited JFiddle:
http://jsfiddle.net/50b7qxjs/1/
This is because the z-index in your
#image1{
width:100%;
top: 0;
z-index:2;
position: absolute;
left: 0;
}
Working Demo
Change the z-index value with z-index:-1
Updated fiddle for your requirement.
I am stuck in making images inside background of a class responsive.The website url .
It would be very helpful if you could help me out i am using bootstrap and nivo slider.
The css and the html that i am using for the slider are given below.
The css:
.slider-wrapper {
width: 310px;
height: 650px;
background: url("images/iPhone.png") center center ;
background-size:cover;
}
.nivoSlider {
position:relative;
width:290px;
height:512px;
top:60px;
bottom:65px;
left:23px;
right:24px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:100%;
height: 100%
}
The html:
<div class="slider-wrapper ">
<div id="slider" class="nivoSlider">
<img src="" />
<img src="" />
</div>
</div>
And a screenshot of the above code (with additional html ) on a laptop:
Here is the website url. Try viewing it below 380px width as that's when the problem occurs.
I want the image to be visible properly at less than 380px.
I want the all the images to become smaller and be in the center and properly aligned below 380px but i get this:
.
I would be more than thankful if you could help me out
It's a little hard to debug without seeing the whole picture, but I think you need to be using max-widths like the code below. This will prevent your divs/images from becoming larger than you want, but will allow them to be smaller if necessary.
.slider-wrapper {
max-width: 310px;
max-height: 650px;
background: url("images/iPhone.png") center center ;
background-size:cover;
}
.nivoSlider {
position:relative;
max-width:290px;
max-height:512px;
top:60px;
bottom:65px;
left:23px;
right:24px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width:100%;
height: auto;
}
Absolute positioned elements need to be put in a floated container to move responsively. The mobile content will move in sync with the screen shell if you put the absolute container into a floated one. I ran into this exact same problem on one of my projects - it's a surprisingly easy solution.
Pen:
http://codepen.io/staypuftman/pen/tFhkz
Note the pink absolute positioned element moves as you resize the screen while staying inline with the blue box. The whole blue box with the pink absolutely positioned element inside will float together as unit to any width.
HTML:
<div class="hero-background">
<div class="hero-text-area-container">
<h3 class="hero-text-effects">Eaters: Find Your Favorite Food Truck</h3>
</div>
<div class="iphone-backdrop">
<div class="hero-image-band-container"></div>
</div>
</div>
CSS (background colors are to show elements):
.hero-background {
background: #dedede;
height: 100%;
margin-top: 4em;
min-height: 20em;
min-width: 100%;
}
.hero-text-area-container {
background: #d6ffd1;
float: left;
margin: 0% 6%;
max-height: 25em;
padding-top: 11em;
position: relative;
vertical-align: middle;
width: 55%;
}
.hero-background .hero-text-area-container h3 {
background: #f7f7f2;
opacity: .8;
padding: 1em;
text-align: center;
}
.iphone-backdrop {
background: #d1e2ff;
float: left;
height: 120px;
max-width: 320px;
padding-top: 2em;
position: relative;
width: 100px;
}
.hero-image-band-container {
background: #ffd1d1;
height: 80px;
position: absolute;
width: 80px;
top: 13%;
left: 0;
bottom: 0;
right: 0;
}
Change the css in nivo-slider.css from:
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%
}
To
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
/* now this is the important things for your problem */
vertical-align: baseline !important;
max-width: none !important;
}
i found the answer.It was posted to me by a user.So I'm sharing it if anyone else gets into any trouble:
"So to not have all the things in the comments I post an answer.
The "problem" on screen-/ viewport widths of 380px and below has several issues.
On your outer <div> with the class slider-wrapper3 (it's the one which holds the iPhone as background image) you should use the following in your CSS:
.slider-wrapper3 {
background-size: contain; /* you use cover */
background-repeat: no-repeat;
/* keep the rest of your actual code */
}
and remove the width setting (width: 310px;) at least for your small screen layout!
By doing so you have then fixed the position and size of the container (and also the background image).
So you still need to adjust the image sizes (probably in your slider script, or wherever the image's dimensions come from)."
Try this:
#media(max-width: 380px) {
.nivoSlider{
position:relative;
width:94%;
height:378px;
top:85px;
bottom:0px;
left:8px;
overflow: hidden;
}
I need to design a page with border images on each side. I need the page to fit on 1280x1024 and 1024x768 resolutions. Is it possible to have a fixed size for the center div and crop the border images in the lower resolution ?
1280x1024 : border-200px center-840px border-200px
1024x768 : border-72px center-840px border-72px
I've made two images with 200px X 5px. I've tried to use the float property without success.
So I've made it this way so far, it works in 1280x1024 but not in 1024x768 (it's too wide).
HTML :
<body>
<div id="right"></div>
<div id="left"></div>
<div id="center">
<h1>Title</h1>
<p>Content here</p>
</div>
</body>
CSS :
html {
margin: 0px;
padding: 0;
}
body {
margin: 0px;
padding: 0;
width: 100%;
background-color: white;
overflow: auto; /*to clear the floats*/
}
#right {
clear: both;
position: absolute;
right: 0;
background-image: url('/site_media/images/border-right.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#left {
clear: both;
position: absolute;
left: 0;
background-image: url('/site_media/images/border-left.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#center {
width: 840px;
margin: 0px auto;
padding-left:10px;
padding-right:10px;
}
Thank you!
since the center element if fixed-width, this should be easy. the side border should be placed as 'background' in the body instead of having its own div.
correct me if im wrong, based on what i understand here, you want the side border to be cut/crop by 1024 resolution instead of shrink. how about you make a single image with 1280 width, place both side border images in it accordingly, left and right, leave the center area empty. save this as a single image (up to you if you want a transparent background), then do the followings.
<style type="text/css">
body { /* can also use your own div */
background:url(path_to_the_single_image) repeat-y top center;
}
#center {
width:840px;
margin:0 auto; /* centered the div */
background:green;
}
</style>
<body>
<div id="center">center content</div>
</body>
thats it! now you should have your fixed width element in the center, and your side-borders in the background. if you load it in 1280, you should see the full border, while if you resize down to 1024, your centered element should remain there, and your side border just now should cropped out by the browser.
let me know if this is what you looking for.. :)
if I understand correctly - what you're looking for is a bit difficult to achieve without javascript.
You can consider a bit different approach that is: can the sidebars (graphic borders) slide under the center content?
example:
<style type="text/css">
#wrapper { position: relative; }
#right, #left { width: 200px; position: absolute; background: gray; }
#right { right: 0; }
#left { left: 0; }
#center { width: 840px; margin: 0 auto; background: green; position: relative; }
</style>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
</div>
</body>