Condition 1: A 46px top bar
Condition 2: 1 photo at the top and the other at the bottom
I have tried the methods listed on How to resize an image to fit in the browser window?, but there is still slightly taller than the viewport. I have to scroll down to see the lower part of the photo.
How can I make it fit perfectly of the viewport? Do the size of the photos matter?
Simplest CSS tools are sufficient. So your topbar is 46px in height which means your images should reside on top of each other in a full viewport (100vh) but less 46 px. Lets share that 46px among images 23px each.
#topbar {
background: maroon;
display: table-cell;
vertical-align: middle;
text-align: center;
color: white;
height: 46px;
width: 100vw;
}
#mg {
display: block;
height: calc(50vh - 23px);
}
#jl {
height: calc(50vh - 23px);
}
<div id="topbar">Hi..! I am the topbar with a 46px height.</div>
<image id="mg" src="https://www.gazetemag.com/wp-content/uploads/2020/01/Mel-Gibson-1.jpg">
<image id="jl" src="https://i.tmgrup.com.tr/vogue/img/photo_gallery_b/18-08/15/jennifer-lopez-955778686.jpg">
using CSS GRID
The Idea is simple (code snippet below) but I will explain it well here so everyone can understand!
new answer
I used the calc(); function in CSS (is for doing dynamic calculations in your CSS)
I use this CSS VARIABLE for setting the height of nav
--nav-height: 46px;
so now for use, it write height: var(--nav-height); in your nav selector
if you want Two Images, One on top, and One on the bottom...
just write display: grid; in the parent element. in fact, the grid makes everything inside in a row. (that's simple)
don't use % for this, instead, use:
vh for height (is a metric equal to 1% of all height of the browser, no matter the parent width or height)
vw for width (is a metric equal to 1% of all width of the browser, no matter the parent width or height)
with vh this layout it will be also Responsive
Responsive = is work in all devices
normally if you want to set half-height for every image use 50vh
50vh = 1/2 screen Height (half screen)
but one problem...
your question is include also a nav in it...
I find a solution!
use this Formula:
--img-height: calc(50vh - ((var(--nav-height)) / 2))
the idea is:
set the height to half_Height
and get the NavHeight
decrease the half of NavHeight for every Image (so the two image be equal)
in the end:
set the width of images with auto
width: auto;
with auto your image not be stretched wrong.
the code
* {
--nav-height: 46px;
--img-height: calc(50vh - ((var(--nav-height)) / 2))
}
body {
margin: 0;
height: 100vh;
}
nav {
height: var(--nav-height);
background: blue;
color: white;
}
.container {
display: grid;
}
.container .image {
height: var(--img-height);
width: auto;
}
<!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>
<nav>my Awesome NavBar</nav>
<div class="container">
<img class="image" src="https://laaouatni.github.io/w11-clone/images/1dark.jpg" alt="">
<img class="image" src="https://laaouatni.github.io/w11-clone/images/0light.jpg" alt="">
</div>
</body>
</html>
previous answer
if you want a Two Element, One on top, and One on the bottom...
just write display: grid; in the parent element. in fact, the grid makes everything inside in a row. (that's simple)
don't use % for this, instead, use:
vh for height (is a metric equal to 1% of all height of the browser, no matter the parent width or height)
vw for width (is a metric equal to 1% of all width of the browser, no matter the parent width or height)
so now set the height of 50vh in the images
50vh = 1/2 screen Height (half screen)
with vh this layout it will be also Responsive
Responsive = is work in all devices
set the width of images with auto
width: auto;
with auto your image not be stretched wrong.
previous code
body {
margin: 0;
}
.container {
height: 100vh;
display: grid;
}
.container .image {
height: 50vh;
width: auto;
}
<!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>
<div class="container">
<img class="image" src="https://laaouatni.github.io/w11-clone/images/1dark.jpg" alt="">
<img class="image" src="https://laaouatni.github.io/w11-clone/images/0light.jpg" alt="">
</div>
</body>
</html>
Related
Why is my footer not pressed to the bottom?
body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.main {
flex: 1 1 auto;
}
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<header class="header">Header</header>
<main class="main">Main</main>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
PS: If you change min-height % to vh then it works. Why is that?
I don't understand why it works like that.
The issue is with the use of min-height property set to 100%. This is telling the browser to set the minimum height of the wrapper div to be 100% of the viewport height, but since the main and header elements are also set to take up space, the footer is pushed down below the fold.
On the other hand, if you change min-height to vh, it works because vh (viewport height) is a unit of measurement that is relative to the height of the viewport and not the parent element. Therefore, it correctly sets the height of the wrapper div to be the full height of the viewport, and since the main and header elements have a flex: 1 1 auto property, they are taking up all the available space and the footer is at the bottom of the viewport.
Could you please advise how to divide the screen into two halves horizontally? Here is my attempt, but the height=100% kind of doesn't work. (I intend the whole screen to be covered) How can I make it work? Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hey I am a title</title>
<style>
.t7{width: 50%; height: 100%; background-color: #506970; }
</style>
</head>
<body>
<div class=t7>aaa</div>
<div class=t7>bbb</div>
</body>
</html>
Both the html and body tag should have their width and height properties set to 100%. By default the height won't be 100%, which is why these elements do not expand vertically. As a side note, you might also want to set the margin (specifically on the body) to zero.
Also, whitespace between elements can cause problems when you are trying to use up 100% of the width. And because you are using div elements, you will want to set their 'display' property to 'inline-block'. By default they use 'block', which causes a line break (effectively) after the element, so the two elements wouldn't be side-by-side.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hey I am a title</title>
<style>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
.t7{width: 50%; height: 100%; background-color: #506970; display: inline-block; }
</style>
</head>
<body>
<div class=t7>aaa</div><div class=t7>bbb</div>
</body>
</html>
In this case you can use vh units for the screen height.
vh – Relative to 1% of the height of the viewport.
Your code will look like that:
.html
<div class="top"></div>
<div class="bottom"></div>
.css
.top, .bottom {
height: 50vh;
}
As a result, the screen will be splitter in half horizontally.
In order for the CSS height property to work using percentages, the parent element must have a defined height. So to fix this, you must git the <body> a height of 100%. But in order for that to work, you must also give the <html> a height of 100%.
html, body { height: 100% }
Another option is to use the viewport width/height vw/vh measurement instead of percentage based measurement.
.t7 { width: 50vw; height: 100vh; ... }
First, I apologize; I'm a designer, not a coder. I have to create a webpage to share a logo with clients. I've written something by trial and error that is a little better than good enough, but now I'd like to try and make it better.
The webpage consists solely of four images. I would like the topmost image to be centered and scaled to fit in the viewer's browser window. I've looked at sample code, and I can't get any of it to work. [Aside: Of the dozen samples I tried, none of them were remotely similar to each other. I'm amazed that there are so many ways to do the same thing—and yet I still couldn't figure it out.]
It would be great if the solution could fix an small issue I have with the page: The height of the top image scales to 75% of the window height (which fits horizontally 95%. of the time), but when viewed on a tall, narrow screen (like a phone), the right side of the image gets cut off. Is it possible to scale based on whether the window's height or width is smaller?
Finally, I would like to have space between the images which right now I achieve with padding. However, this means it's a fixed 50px regardless of the size of the images which scale proportionally to the window's width. Is it possible to make the padding 25% to the height of the image?
Thank you,
Pete
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saltwater Logos</title>
<style>
html, body {
height: 100%;
}
img.icon {
height: 75vh;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
padding-bottom: 50px;
}
img.logo {
height: 90%;
width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
padding-bottom: 50px;
}
</style>
</head>
<body style="background-color:black;">
<div>
<img class="icon" src="logo/Icon.png" alt="Icon">
<img class="logo" src="logo/Positive.jpg" alt="Positive" align="center">
<img class="logo" src="logo/Negative.jpg" alt="Negative" align="center">
<img class="logo" src="logo/BlackWhite.png" alt="Black & White" align="center">
</div>
</body>
</html>
You mean that <img class="icon" src="logo/Icon.png" alt="Icon"> is cut, right? Well, that's because you didn't write to rescale it.
When you define img.logo's CSS, you write height: 90%; width: 90%;, which only tells to mantaign 90% proportion of the window. Meanwhile when you define img.icon you just write height: 75vh; width: auto;, which is a fixed size. This way, if your monitor/screen is smaller than 75vh (which is 565.5px), the image will be cut (and not resized to fit in).
So, I think writing a percentage (like 100%) instead of a measure (like 75vh) as a value of height and width will do it.
This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
Closed 3 years ago.
I am working on my first angular site and i'm trying to create a gradient div which fills the rest of the screen. When I set the height of the grad1 gradient, with px, it works fine. However, if I use a percentage like 50% or 100%, or just let it set the default height, it results in a height of zero. What could be causing this?
my-component.html
<div id="grad1"></div>
my-component.css
#grad1 {
width: 100%;
background-color: #b0afb4; /* For browsers that do not support gradients */
background-image: linear-gradient(#b0afb4, #fff, #b0afb4); /* Standard syntax (must be last) */
}
app-component.html
<div>
<app-home-display></app-home-display>
</div>
<router-outlet></router-outlet>
app-component.css is empty
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyWebApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
global styles.css
body {
margin: 0;
}
If your div has not content (text or other), its height will default to 0. If you want the div to fill the entire page you can use:
#grad1 {
height: 100vh;
...
}
It means you set div height to the full browser viewport height (useful for different screen resolutions).
Your problem is probably with css order. an easy way to handle it is to use flex for the parent tag (components generated). you can use :host key in css for that. example:
:host {
display: flex;
flex-direction: column;
flex: 1;
}
also make sure the first element having the max height (ex min-height: 100vh; in app-root host)
Why 2 divs are overflowing each other?
I have equally divided two divs with viewport width.
Insted of 50% width if I am giving 49% then code is working fine
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
.fity{
width: 50vw;
height: 100vh;
float: left;
}
</style>
</head>
<body>
<div class="fity" style="background:red;"></div>
<div class="fity" style="background:blue;"></div>
</body>
</html>
It's because of the vertical scroll bar.
MDN Information
Viewport-percentage lengths defined a length relatively to the size of
viewport, that is the visible portion of the document. Only
Gecko-based browsers are updating the viewport values dynamically,
when the size of the viewport is modified (by modifying the size of
the window on a desktop computer or by turning the device on a phone
or a tablet).
In conjunction with overflow:auto, space taken by eventual scrollbars
is not substracted from the viewport, whereas in the case of
overflow:scroll, it is. [My Emphasis]
If you add overflow:hidden to the body it gets fixed. -
JSFiddle Demo