I need text aligned to the bottom (and over the top) of a background image scaled with:
background-size: contain;
I tried scaling the text container with javascript, by matching the size of the image element:
var positionInfo = slide.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
info.style.width=width + "px"
info.style.height=height + "px"
But I can't get the actual size of the background image, only the element is it contained by. Is there a way to get the background images exact size?
Full code:
var info = document.getElementById('info');
var slide = document.getElementById('slide');
window.onresize = function(event) {
posInfo()
};
function posInfo() {
var positionInfo = slide.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
info.style.width=width + "px"
info.style.height=height + "px"
}
posInfo()
* {
margin: 0;
padding: 0;
background: black;
box-sizing: border-box;
}
img {
max-width: 100%;
}
.fullscreen {
width: 100%;
height: 100vh;
position: absolute;
border: 100px solid black;
}
#slide {
border:2px solid red;
position: relative;
height: 100%;
display: block;
background: url("http://c0177.paas1.ams.modxcloud.com/standard/8.jpg")
no-repeat center center;
background-size: contain;
z-index:3;
}
#info {
border:2px solid yellow;
display:block;
z-index:3;
background:transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#info a {
position:absolute;
bottom:0;
background:yellow;
padding:20px 120px;
left: 50%;
transform: translateX(-50%);
}
<div class="fullscreen">
<div id="slide"></div>
<div id="info"><a>Project name</a></div>
</div>
So, one way to accomplish what I believe you want to do is by making the .fullscreen class be a css grid that centers content. Then, instead of having the image being the background, you just put it in an image tag and it will mimic the contain style with some help from max-height. Here is an example: https://codepen.io/omnitect/pen/wxEMjG
<div class="fullscreen">
<div id="slide">
<img src="https://c0177.paas1.ams.modxcloud.com/standard/8.jpg" />
<div id="info"><a>Project name</a></div>
</div>
</div>
Also, in the style, you want to modify #info to not have the transforms, it just needs a really basic position styling.
.fullscreen {
width: 100%;
height: 100vh;
position: absolute;
border: 100px solid black;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 1fr auto 1fr;
}
#slide {
grid-column: 2 / span 1;
grid-row: 2 / span 1;
border: 2px solid red;
position: relative;
display: block;
z-index: 3;
max-height: calc(100vh - 200px);
}
#slide img {
max-height: calc(100vh - 200px);
width: auto;
max-width: 100%;
}
Note: The calc(100vh) is due to the 100px border.
#info {
border:2px solid yellow;
display: block;
z-index:3;
position: absolute;
bottom: 0;
left: 50%;
}
Related
div.test{width:100px;height:100px;border:1px solid red;}
The css will create a box with 100px width and 100px height .
How can draw a hr line which begins with coordinate (0,50) ,ends with coordinate(100,50) in the div.test?
How can draw a hr line which begins with coordinate (0,50) ,ends with coordinate(100,50) in the div.test?
Use a pseudo element to draw the horizontal line absolutely positioned relative to the parent.
div.test {
width: 100px;
height: 100px;
border: 1px solid red;
position: relative;
}
.test::after {
content: '';
border: 1px solid black;
position: absolute;
top: 50%;
left: 0;
right: 0;
}
<div class="test"></div>
Position the <hr> accordingly.
div.test{width:100px;height:100px;border:1px solid red;}
hr {
position: relative;
z-index: -1;
margin-top: -50px;
width: 100px;
margin-left: 0px;
}
<div class="test"></div>
<hr>
What if you gave your hr a margin-top of 50%?
CSS
#line{
margin-top:50%;
}
HTML
<hr id="line" />
hr {
margin-top: -50px;
width: 100px;
margin-left: 0px;
}
I created an image slider, but I am running into an issue. I want the width of the images to be the entire width of the screen; I accomplished this. However, my images' height are more than 100% of the height of the screen. I am wanting the height to be around 50-70% of the screen (preferably 50%). I tried adding height: 70vh; to my images, but that did not help.
Can anyone suggest something to help this?
My slider can be viewed at: http://realtorcatch.com/slider3
My code is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Sans-Serif;
}
img {
max-width: 100%;
/*height: 70vh;*/
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
overflow: hidden;
}
.cycle-pager .cycle-pager-active {
background-color: #FFF;
}
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/subway.jpg" alt="subway">
<img src="images/beach.jpg" alt="beach">
<img src="images/space.jpg" alt="space">
</div>
On your img declaration, instead of max-width set width to 100% and height to 70vh. If you'd like more variety in the height, try setting the min-height to be 50vh and the max-height to be 70vh.
Be warned, this will skew your images and make them look disproportionate.
Alternate solution:
Create a "scrim". By this, I mean create a box that covers up the bottom half of the page. You can actually do this with a pseudo-element from your wrapper:
.cycle-slideshow {
position: relative;
...
}
.cycle-slideshow:after {
content: '';
width: 100%;
height: 50%; //50% of parent element
background-color: white;
position: absolute;
top: 50%;
left: 0;
z-index: 2;
}
change style of img to img {width: 100%; height: 100vh;}
It will work for you. Thank you.
try this,, Hope it will help you.
var vHeight = $(window).height()/2, // for 50%
vWidth = $(window).width(),
I am trying to make a div inside another one exactly in the middle. Is there any better way to do that?
body, html
{
margin:0;
height:100%;
}
#master_wrapper
{
width:100px;
height:100px;
background:#57a957;
}
#header
{
left:50%;
width:50%;
height:50%;
background:red;
}
<div id="master_wrapper">
<div id="header">
Header
</div>
http://jsfiddle.net/uba1wr52/
You can make the inner div exactly in the middle by adding style "margin: 0px auto" to the #header in the css file.
Just so you know, a lot of your css is pointless/redundant since you've not set your positioning of your classes. I.e. to use top:... left:... right:... and/or bottom:... you need to have set your positioning to absolute;
The snippet below allows you to horizontally and/or vertically center your div element:
html,
body {
padding: 0;
margin: 0;
}
#master_wrapper {
width: 100px;
height: 100px;
background: #57a957;
position: relative;
}
#header {
position: absolute;
width: 50%;
height: 50%;
background: red;
margin:0 auto; /*horizontally center*/
left:0;
right:0;
-webkit-transform: translateY(50%); /*vertically center*/
-ms-transform: translateY(50%);
transform: translateY(50%);
}
<div id="master_wrapper">
<div id="header">
Header
</div>
An example how to place a HTML Element in the middle horizontal and vertical
<!DOCTYPE html>
<html>
<head>
<title>Div in middle</title>
</head>
<body>
<div style="
background: red;
width : 300px;
height : 100px;
">
<div style="
background : #fff;
width : 123px;
height : 67px;
margin : 0 auto;
position: relative;
top : 50%;
transform : translateY(-50%);
">
Div in middle of other div
</div>
</div>
</body>
</html>
You can test in live editor if you want
margin: 0 auto;
This will automatically horizontally center your div with top and bottom margin of 0; You can also do:
margin: 0 auto 0 auto;
In order to control top and bottom margins, margin values go like:
margin: top right bottom left;
width: 100%; // can be in pixels also.
margin: 0 auto;
Try with padding: http://jsfiddle.net/5oxg9aay/1/
body, html {
margin: 0;
height: 100%;
}
#master_wrapper {
width: 58px;
height: 58px;
background: #57a957;
padding: 4%;
}
#header {
background: red;
width: 100%;
height: 100%;
}
or use a position: absolute; in the header and work with left/right/top/bottom but you need to make #master_wrapper the mother container for #header.
I have a div named welcome-inputs and within other two left and right
The div named left needs to be on the left side welcome-inputs and the div named right right side of welcome-inputs.
left and right have width = 100px
Need for a line that is at the MIDDLE of the two, signaling the separation.
view the code: http://jsfiddle.net/gn1asdmh/3/
The red line must be in the middle of the images (the images represent left and right)
jsFiddle demo
Add a span element between .left and .right
<span class="middleLine"></span>
CSS:
.welcome-inputs {
float: none;
margin: 0 auto;
width: 80%;
background:white;
height:100px;
text-align:center; /* ADD THIS */
}
.welcomeforms {
color: #6B6B6B;
margin: 0 auto;
width: 100px !important;
}
.left {
float: left;
/*border-right: 3px solid red; REMOVE THIS */
}
.right {
float: right;
}
body {
background:blue;
}
span.middleLine{
display:inline-block;
border-right: 2px solid red;
margin-left:-1px; /* cause the border is 2px */
height:100%;
}
JSFiddle
The other way to resolve it.
.left {
position:absolute;
top: 0;
left: 0;
}
.right {
position:absolute;
top: 0;
right: 0;
}
If you add position: relative to .welcome-inputs, you can use an ::after or ::before pseudo-element on .left or .right like this:
.left::after {
border-right: 3px solid red;
content: "";
height: 100px;
position: absolute;
top: 0;
left: calc((100% - 3px) / 2); // or use '50%' for better compatibility, but less exactness
}
and get rid of the border-right on .left
JSFiddle Here
Just use generated content on the parent element. There is no reason in the given example to use structural markup for this.
Updated fiddle, http://jsfiddle.net/gn1asdmh/26/
.welcome-inputs {
float: none;
margin: 0 auto;
width: 80%;
background:white;
height:100px;
position: relative;
}
.welcome-inputs::before {
content: '';
display: block;
position: absolute;
outline: 1px solid red;
left: 50%;
width: 0;
height: 100px;
}
.welcomeforms {
color: #6B6B6B;
margin: 0 auto;
width: 100px !important;
}
.left {
float: left;
}
.right {
float: right;
}
body {
background:blue;
}
The cleanest way to do it would be to use an HTML table. This will keep it responsive. Try something like the below code.
.welcome-inputs {
width: 100%;
}
#leftInput,
#rightInput {
width: 100px;
}
#separatorInput {
text-align: center;
}
#dividingLine {
display: inline-block;
height: 100%;
width: 5px;
background: red;
}
<table class="welcome-inputs">
<tr>
<td id="leftInput">
<img width="100%" src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" />
</td>
<td id="separatorInput"><div id="dividingLine"</td>
<td id="rightInput">
<img width="100%" src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" />
</td>
</tr>
</table>
Even better: no need to use any empty/dummy elements. We rely on using pseudo-elements instead. In this case I will use ::before:
.welcome-inputs {
float: none;
margin: 0 auto;
width: 80%;
background:white;
height:100px;
position: relative; /* new property added to original one */
}
.welcome-inputs::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 3px;
background-color: red;
left: 50%;
transform: translateX(-50%);
}
Just remember to declare position: relative on the parent element. See fiddle here: http://jsfiddle.net/teddyrised/gn1asdmh/28/
p/s: You might want to use vendor prefixes for transform, to maximise cross-browser compatibility.
to add some idea to these answers , you may think as well of :box-sizing, calc() for instance , or even a simple background image/repeat/sizing
I have a popup which will get shrink and the content will dislocate on the browser window resize. I am stuck with this
Here is the fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/
and here is the fullscreen fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/show/
Maybe you could view and check resizing the window
HTML
<div id="popup" >
<div id="img-section" >
<img src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/256/single-bird-icon.png" />
</div>
<div id="description">
//text content
</div>
</div>
<div id="fade" class="black_overlay"></div>
click here
CSS
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
min-width: 100%;
min-height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#popup {
display: none;
position: fixed;
top: 8%;
left: 10%;
max-width:1200px;
max-height:600px;
height:auto;
width:auto;
padding: 16px;
background-color: white;
z-index:1002;
overflow:hidden;
}
#img-section {
position:relative;
width:800px;
float:left;
background:black;
cursor:pointer;
height:600px;
padding:5px;
margin-top: -20px;
margin-left: -15px;
margin-right: 10px;
}
#description {
position:relative;
background-color: #fff;
max-width:400px;
overflow-y: auto;
position: relative;
word-wrap: break-word;
max-height:600px;
height:auto;
padding: 20px;
}
#img-section > img {
display:inline-block;
height: auto;
vertical-align:middle;
width:auto;
}
I want the poup to remain as it is, It should not shrink
Thanks in advance
Side scrolling for a popup is horrible, but:
make the popup position: absolute instead of fixed
give the body a min-width of left margin + popup width (currently that would be calc(1200px + 10%)
same for height?
make all max-width => width, because you know how much room you have
Your existing CSS is mighty strange, but this might do it: http://jsfiddle.net/rudiedirkx/ZjdU4/1/
Highlights:
body {
min-width: calc(1200px + 10%);
}
.black_overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#popup, #popup * {
box-sizing: border-box;
}
#popup {
position: absolute;
width: 1200px;
height: 600px;
padding: 0;
}
You are using percentage for your height and width.
The browser change its size on Resize, therefore the value of the percentage depreciates.
Like 10% of 100px differs from 10% of 10px.
Use px to keep your height and width the same size on resize.
Of course depending on what you want neither is better than the other