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?
CodePudding user response：
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">CodePudding user response：
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:
vhfor height (is a metric equal to 1% of all height of the browser, no matter the parent width or height)vwfor 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
NavHeightfor 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 >
<img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg" alt="">
<img 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:
vhfor height (is a metric equal to 1% of all height of the browser, no matter the parent width or height)vwfor 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 >
<img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg" alt="">
<img src="https://laaouatni.github.io/w11-clone/images/0light.jpg" alt="">
</div>
</body>
</html>