I have the following test here: http://dev.driz.co.uk/gallery/index2.php
The idea is that an image should be centred within the gallery div and have 72px of padding all the way around it. If the image is smaller than the screen, then it will be centred (this part works), however if the image is larger than the screen then it should resize itself to fit depending on the best ratio.
This is achieved by setting the image max-height and max-width to 100% so the image is constrained by its container element. And in this case the container is two faked tables with CSS to centre it on the page.
What's actually happening is the image is just ignoring the max-height property and only applying the width constrain, so it appears off the page.
Any ideas on what the issue is? In the past I have just used JavaScript to position the image in the middle, but would prefer to use just CSS like in the example.
Full code is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Center</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
border; 0;
}
html,body
{
height: 100%;
width: 100%;
}
body
{
overflow: hidden;
}
.gallery
{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.gallery-background
{
background: #333333;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
padding: 72px;
}
.gallery-outer
{
display: table;
width: 100%;
height: 100%;
border-collapse: collapse;
table-layout:fixed;
}
.gallery-inner
{
text-align: center;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.gallery-image
{
position: relative;
}
.gallery-image img
{
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
</style>
</head>
<body class="default">
<div class="gallery">
<div class="gallery-background">
<div class="gallery-outer">
<div class="gallery-inner">
<div class="gallery-image">
<img src="EmpireState.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When you give an image a max-height of 100%, it looks for its direct parent tag's height. If that doesn't have a height or constrained in anyway, then it can't apply the rule to height of the image. Looking at your HTML/CSS, I would strip it back and simplify it like this:
<div class="gallery">
<div class="gallery-background">
<img src="EmpireState.jpg">
</div>
</div>
And the CSS
.gallery {
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
.gallery-background {
background: none repeat scroll 0 0 #333333;
bottom: 0;
left: 0;
padding: 72px;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
.gallery-background:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.gallery-background img {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
Hopefully that should sort it out
Related
I am trying to attach a div to the bottom of the page. This page is not scrollable, but I cannot set top by pixel because it needs to be responsive to screen size. All I want is a div at the bottom of the page that takes up 100% of the horizontal space and 20% of the vertical space.
What I've tried:
Making parent relative and child absolute.
Setting parent's min-height: 100%
Here is my code:
<html>
<head>
<title>Forget It</title>
<link rel="stylesheet" href="../static/styles.css">
</head>
<body>
<div class='parent'>
<div class='ground'></div>
</div>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #96b4ff;
}
.parent {
position: relative;
min-height: 100%;
}
.ground {
position: absolute;
height: 20%;
bottom: 0;
background-color: #2cb84b;
}
Any ideas? Thanks!
Just apply width: 100%; to .ground to make the div take full width.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #96b4ff;
}
.parent {
position: relative;
min-height: 100%;
}
.ground {
position: absolute;
height: 20%;
width: 100%;
bottom: 0;
background-color: #2cb84b;
}
<div class='parent'>
<div class='ground'>footer</div>
</div>
I have problem with how to make children size following its parent. The case below.
HTML
<div class="video">
<div class="spot">
<img src="..." alt="">
<button>x</button>
</div>
</div>
CSS
.video {
width: 600px;
height: 500px;
background: #000;
position: relative;
}
.spot {
position: absolute;
max-height: 30px;
top: 0;
left: 0;
display: table;
margin: 0;
max-width: 100%;
/* width: 16%; only height can affect image on content*/
}
.spot img {
width: 100%;
height: 100%;
}
.spot button {
position: absolute;
top: 0;
left: 100%;
margin-left: -24px;
}
What I want to do is to make the image follow the spot height. Because if I set width (whatever size), the image will follow the spot width. Anyone know how to do this?
I also create jsfiddle https://jsfiddle.net/isatrio/yosfep6r/14/.
Your image is already following your .spot height. Check the border on spot. Or do you mean overflow? Or do you want your .spot to follow your .video?
console.log(".spot height: " + $(".spot").innerHeight());
console.log("img height: " + $(".spot img").height());
.video {
width: 600px;
height: 500px;
background: #000;
position: relative;
}
.spot {
border: red 2px solid;
position: absolute;
height: 40%;
/*width: 20%;*/
top: 0;
left: 0;
margin: 0;
padding: 0;
max-width: 100%;
overflow: hidden;
}
.spot img {
/*width: 150%;*/
height: 100%;
}
.spot button {
position: absolute;
top: 0;
left: 100%;
margin-left: -24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
<div class="spot">
<img src="https://creativeblossoming.files.wordpress.com/2013/10/navy-living-room.jpg" alt="">
<button>x</button>
</div>
</div>
You have set max-width instead of width. max-width will not set the width to the given value, it will just prevent the width from surpassing the given value.
.spot {
position: absolute;
height: 30px;
top: 0;
left: 0;
display: table;
margin: 0;
width: 100%;
}
I have a div that is 50% the width of the screen and 100% height.
I want to have an image placed at the bottom of the div that will adjust with the width.
To set the position I use position: absolute; but this removed the auto width:
code:
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#full-size {
height: 100%;
width: 100%;
overflow: hidden;
}
#aaaaa {
width: 50%;
height: 100%;
background: #0F0;
float: left;
}
.bottomImage {
width: auto !important;
width: 100%;
max-width: 100%;
position: absolute;
bottom: 0;
width: auto;
}
<div id="full-size" class="clearfix">
<div id="aaaaa">
<img class="bottomImage" src="events_bottom.png" />
</div>
</div>
Is there any way to have an image positioned absolute and adjust to container width?
Adding position: relative to #aaaaa allows the image width and offsets to be computed with respect to the #aaaaa block's width and position.
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#full-size {
height: 100%;
width: 100%;
overflow: hidden;
}
#aaaaa {
width: 50%;
height: 100%;
background: #0F0;
float: left;
position: relative;
}
.bottomImage {
width: 100%;
position: absolute;
bottom: 0px;
left: 0;
}
<div id="full-size" class="clearfix">
<div id="aaaaa">
<img class="bottomImage" src="http://placehold.it/300x50" />
</div>
</div>
You could try this:
.aaaaa {
position: relative;
}
.bottomImage {
position: absolute;
left: 0;
right: 0;
}
https://jsfiddle.net/1oxy7odv/
HTML
<div>
<img />
</div>
CSS
div {
display: block;
position: relative;
width: 500px;
height: 500px;
background: black;
margin: 50px auto;}
img {
display: block;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: red;
height: 25px;}
you could use another positioning for your bottomImage to size with its parent container:
.bottomImage {
position: absolute;
top: 0; //or whatever position from top
left: 0;
right: 0; //important !!! this way its always on the rightest(?) position of the parent)
bottom: 0;
}
You can also try this:
.bottomImage {
width: inherit; /*inherits width from div.aaaaa*/
max-width: 100%;
position:absolute;
bottom:0;
}
I have a div with background image put inside another div, instead of fit width parent div, it fit full screen. Please take a look my code to know clearly, sorry for bad english.
http://codepen.io/thehung1724/full/jEEgQq/
HTML
<div id="video-section" class="dark-section">
<div class="home"></div>
<div class="fullscreen-img" style="background-image: url(http://upanh.biz/images/2014/11/23/bg1.jpg)"></div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
#video-section{
margin: 0 auto;
width: 1230px;
height: 500px;
}
.dark-section{
background-color: black;
}
.home{
display: table;
height: 500px;
left: 0;
position: relative;
top: 0;
width: 100%;
}
.fullscreen-img {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: auto;
left: 0;
min-height: 500px;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
Thank in advance.
The .home div needs to be absolutely positioned in order not to "push" the background div downwards. The background div shouldn't have the fullscreen-img class, since most of those rules should be removed. It only needs height: 100% because divs have width: 100% by default since they're block elements. Of course, move the inline styles into a class or ID rules, I left them there just to show you.
That's all you need basically:
remove the .fullscreen-img class from the background div
set its height to 100% instead
make the .home div absolutely positioned
See it here: http://codepen.io/anon/pen/azzexY
*{
margin: 0;
padding: 0;
}
body {
background-color: black;
}
#video-section{
margin: 0 auto;
width: 1230px;
height: 500px;
}
.dark-section{
background-color: black;
}
.home{
display: table;
height: 500px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div id="video-section" class="dark-section">
<div class="home"></div>
<div class="" style="height: 100%; background-image: url(http://upanh.biz/images/2014/11/23/bg1.jpg)"></div>
</div>
UPDATE
Fixes/changes for your website for the problematic element (<div style="background-image: url('images/bg2.jpg');" class="fullscreen-img img-after"></div>):
left: initial;
width: 1230px;
I have to make a layout with a .header and .content like with fixed height (for example 100px) and 100% width.
Then, I have to put a content with dynamical height that cover the void space.
<!-- [...] -->
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
position: absolute;
}
.header {
position: absolute;
top: 0;
height: 100px;
width: 100%;
background: #0F0;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background: #0F0;
}
.content {
position: absolute;
height: 100%;
width: 100%;
background: #F00;
padding: 100px 0;
margin: -100px 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
This layout HAD to permit me to put a header and footer with fixed height, and a content with images that scale dimensions (inside a div.content).
First of all: If you have a unique element, like a page header/footer, please use an id and not a class. A class is used for elements that appear frequently or have something in common that makes it semantically correct to group them, like description texts.
Now your problem. We have to give the html and body a total height of 100% so they won't resize and we can be sure that we will use the whole page.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
You then used a wrapper, but we can omit that. <body> is already a wrapper. The header and footer explain their self.
#header {
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
background: #0F0;
}
#footer {
height: 100px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #0F0;
}
The content is a bit tricky. It needs to be expanded to 100% - 100px at the top - 100px at the bottom. Impossible? No.
#content {
position: absolute;
top: 100px;
bottom: 100px;
left: 0;
right: 0;
overflow: hidden; /* No scrollbars | Make this 'auto' if you want them */
background: #F00;
}
Finished. You can have a look at it on jsFiddle.