I am trying to create a page that will have two divs (technically 3 as one is the wrapper). One at the top covering 8% of the screen we will call topdiv. And one on the bottom covering 92% of the screen we will call bottomdiv. Topdiv will hold text only. Bottomdiv will have an image. I would like the image to fill the bottomdiv at least vertically but not overflow/extend beyond the screen vertically or horizontally and keep its proportion. The images may need to stretch to be bigger or shrink to be smaller, both are possible. This will be for a fullscreen app so scrolling is not an option.
What I have now mostly works except that the image is too large and expands beyond the edges.
I have tried object-fit contain and others, no luck.
My current code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Super Site</title>
</head>
<body style="margin: 0; padding: 0; border-width: 0; overflow:hidden;">
<div id="wrapper" style="position: relative; height: 100vh; background-color: yellow;">
<div style="position: absolute; left: 0; right: 0; top: 0; height: 8%; background-color: red;">
<center><h1>An awesome quote will go here!</h1></center>
</div>
<div style="position: absolute; left: 0; right: 0; bottom: 0; top: 8%; height: 92%; background-color: purple;">
<img src='1.jpg' style='object-fit: cover; width: 100%; height: 100%;'>
</div>
</div>
</body>
</html>
Can anyone help? Thanks :)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Super Site</title>
</head>
<body style="margin: 0; padding: 0; border-width: 0; overflow:hidden;">
<div id="wrapper" style="position: relative; height: 100vh; background-color: yellow;">
<div style="position: absolute; left: 0; right: 0; top: 0; height: 8%; background-color: red;">
<center>
<h1>An awesome quote will go here!</h1>
</center>
</div>
<div style="position: absolute;left: 0;right: 0;bottom: 0;top: 8%;height: 92%;background-color: purple;display: flex;justify-content: center;align-items: center;">
<img src="1.jpg" style="min-height: 100%;max-width: 100%;object-fit: contain;max-height: 100%;">
</div>
</div>
</body>
</html>
Was almost there. Rather than setting the width and height of the img, use max-width, max-height, and min-height. This way the image will scale to fit height, but proportionally stay within the div without going beyond the bounds. Using the justifying and aligning of display:flex on the parent div also ensures the img element stays within the center of the div.
You need to use the justify-content: center and for the second div use max-width and max-height
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Super Site</title>
</head>
<body style="margin: 0; padding: 0; border-width: 0; overflow:hidden;">
<div id="wrapper" style="position: relative; height: 100vh; background-color: yellow;">
<div style="position: absolute; left: 0; right: 0; top: 0; height: 8%; background-color: red; display: flex; align-items: center; justify-content: center;">
<h1>An awesome quote will go here!</h1>
</div>
<div style="position: absolute; left: 0; right: 0; bottom: 0; top: 8%; height: 92%; background-color: purple;">
<img src='https://www.google.com.tw/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png' style='margin: auto; display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; object-fit: contain;'>
</div>
</div>
</body>
</html>```
Related
I have a header section that should wrap according to the header image. Every page has a different image so it must be responsive. However header section will not wrap with the image since it is absolutely positioned.
As you can see in the snippet the image has height: auto on it and just overflows outside of the parent. Is there anyway to make the parent wrap according to the image?
*, ::before, ::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#header::before, #hero.background-wrapper::before {
opacity: 0.2;
}
.background-wrapper::before {
content: '';
position: absolute;
background-color: #000;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .5;
z-index: 0;
}
#hero {
color: #fff;
height: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 80px;
padding-bottom: 60px;
position: relative;
font-family: 'Montserrat', sans-serif;
z-index: 1;
}
.hero-content {
max-width: 911px;
justify-content: flex-start;
text-align: left;
}
.hero-content {
padding: 0;
position: relative;
display: flex;
}
.hero-text {
margin-top: 100px;
max-width: 750px;
}
.background-wrapper picture {
position: absolute;
height: auto;
width: 100%;
inset: 0;
z-index: -1;
aspect-ratio: auto;
}
.background-wrapper picture img {
position: absolute;
height: auto;
width: 100%;
top: 0;
left: 0;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="hero" class="background-wrapper">
<div class="container hero-content">
<div class="hero-text">
<h1>Header</h1>
<h2>Header description</h2>
</div>
</div>
<picture class="hero-picture">
<source srcset="http://localhost/wordpress/wp-content/webp-express/webp-images/uploads/2011/07/img_8399.jpg.webp" media="(min-width: 600px)">
<img src="http://localhost/wordpress/wp-content/webp-express/webp-images/uploads/2011/07/img_8399-450x300.jpg.webp" alt="landing image" decoding="“async”">
</picture>
</section>
</body>
</html>
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript by finding the height of the absolutely positioned children after they have rendered, and using that to set the height of the parent.
Alternatively, just use float: left/float:right and margins to get the same positioning effect while keeping the children in the document flow, you can then use overflow: hidden on the parent (or any other clearfix technique) to cause its height to expand to that of its children.
I have an HTML page with somewhat large text elements. I want the text to align to the bottom of the containing div so that it touches the bottom of the div.
I tried following but still there is some space between the text and the bottom. Is there any way I can remove this space and make the text touch the bottom?
Here is a live sample of what I have tried.
<html lang="en">
<head>
<style type="text/css">
.bottomAlignedText {
position: relative;
}
.bottomAlignedText span {
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="bottomAlignedText" style="width: 600px; height: 600px; border: 1px solid;">
<span style="font-size:300px;">Test</span>
</div>
</body>
</html>
You can do this with line-height
.bottomAlignedText {
position: relative;
}
.bottomAlignedText span {
position: absolute;
bottom: 0;
left: 0;
line-height: 0.7;
}
<body>
<div class="bottomAlignedText" style="width: 600px; height: 600px; border: 1px solid;">
<span style="font-size:300px;">Test</span>
</div>
</body>
I have the following HTML which will work to display a banner and an image. The problem is that I want the image to resize with the window. I thought that the style="height/width" properties would take care of this but however only width seems to work.
HTML:
<!DOCTYPE html>
<html>
<body>
<h3 style="text-align: center;">This company has exceeded the daily limit of Google Street Views</h3>
<img src="https://maps.googleapis.com/maps/api/streetview?size=600x600&location=40.201316987470086,-83.98099300983233" style="width: 100%; height: 100%"> </img>
</body>
</html>
when clicking the bottom of the window and dragging upward, the image should resize vertically along with horizontally so that no scroll bars need to be displayed on the page.
You can do it if you're willing to set a fixed height on your heading element.
html,
body {
height: 100%;
position: relative;
}
.wrapper {
position: absolute;
top: 80px;
bottom: 0;
right: 0;
left: 0;
text-align: center;
background: pink;
}
.wrapper img {
max-width: 100%;
max-height: 100%;
}
<h3 style="text-align: center;">A Lovely Heading</h3>
<div class="wrapper">
<img src="http://lorempixel.com/1200/800" />
</div>
If you wanted the image to entirely cover the bottom area, you'll need to apply it as a background:
html,
body {
height: 100%;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
}
.wrapper {
position: absolute;
top: 80px;
bottom: 0;
right: 0;
left: 0;
text-align: center;
background-image: url(http://lorempixel.com/1200/800/nature);
background-size: cover;
background-position: center bottom;
}
<h3 style="text-align: center;">Heading</h3>
<div class="wrapper">
</div>
Don't use style, the image tag as width and height built in.
<img src="" width="100%" height="100%">
Also, I don't know why you have a second closing tag here "height: 100%">>"
How do I get two div areas over each other? On the following website I try to get the search field in center and over the slider:
http://informationen.lensbreak.com
<div style="width: 100%; height: 100%; position: relative;">
<div sytle="width: 100%; height: 100%; position: absolute; top: 0; left: 0;">[rev_slider testslider]</div>
<div sytle="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;">[search]</div>
</div>
The whole thing should stay responsive.
Try this:
(I added border for each div to help you see areas of divs.)
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
</head>
<body>
<div style="width: 100%; height: 100%; border: red 3px solid">
<div style="width: 100%; height: 100%; border: blue 2px solid ">[rev_slider testslider]</div>
<div style="width: 100%; height: 100%; border: green 1px solid ">[search]</div>
</div>
</body>
</html>
If you want You can also use
<table>
instead of div it can be easier for You.
As a rule you should not use inline-styling if you can avoid it - use classes instead. And below is a solution that will center the searchbox both horizontally and vertically over your slider.
/* This is for your search form */
#completeSearchForm {
margin: 0 auto;
transform: translate(0px, -50%);
}
/* This is for the div that contains the search form */
.your-modifier {
position: absolute;
left: 0;
right: 0;
top: 50%;
}
When IE8 is "normal" standards compliant mode the html and css below does what it should and properly centers the red div. However in compatibility mode it does not get centered. Anyone here able to explain why and suggest an alternative?
<html>
<head><title>test</title></head>
<body>
<div
style="position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 0;
width: 900px;
background-color: red"
>
test
</div>
</body>
</html>
to make it working without the doctype just do this way:
style="position: absolute;
margin-left: -450px;
left: 50%;
top: 0;
width: 900px;
background-color: red"
<!doctype html>
<html>
<head>
<title></title>
<style>
div {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin: -150px 0 0 -150px;
background: navy;
}
</style>
</head>
<body>
<div></div>
</body>
</html>