Requirement 1: A top bar measuring 46px in height Reqirement 2: One photo positioned at the top and another at the bottom I have attempted the techniques mentioned on How to resize an image to fit in the browser window?. However, the images still appear slightly taller than the viewport, requiring me to scroll down to view the complete lower part of the photo. How can I ensure that the images perfectly fit within the viewport? Does the size of the photos play a role in this issue?
Using basic CSS tools can be all you need. If your topbar is 46px tall, then your images should stack on top of each other within a full viewport (100vh) minus 46px. To evenly distribute that 46px among the images, allocate 23px to 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">The concept is straightforward, as shown in the code snippet below. However, I will provide a detailed explanation to ensure clarity for all readers.
I incorporated the calc(); function in my CSS code, which facilitates dynamic calculations within the styling.
Additionally, I utilized a CSS variable to specify the height of the navigation bar:
--nav-height: 46px;
To apply this height to your navigation bar selector, simply use height: var(--nav-height);
If you require two images displayed vertically, with one above the other...
You can achieve this by setting display: grid; on the parent element. Essentially, the grid property organizes the elements in rows automatically.
%; Instead, Consider:vh for height: This unit represents 1% of the browser's viewport height, irrespective of the parent element's dimensions.vw for width: Similar to vh, this unit corresponds to 1% of the viewport width.By utilizing vh, the layout becomes responsive by adapting to various screen sizes consistently.
Responsive design ensures compatibility across all devices.
To set the half-height for both images, employ 50vh:
50vh equates to half of the screen's height.
Your query also involves integrating a navigation bar into the layout...
Here’s a solution: Use the following formula to synchronize image heights:
--img-height: calc(50vh - ((var(--nav-height)) / 2))
This approach involves:
NavHeight)NavHeight from each image’s heightSet the image widths to auto for proper display:
width: auto;
Utilizing auto prevents image distortion.
* {
--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>
<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>If you aim to position two elements, one above the other...
Simply utilize display: grid; on the parent container to align them effectively in a single row.
%:vh: Refers to a percentage of the total viewport height, ensuring consistent sizing regardless of parent constraints.vw: Corresponding to a percentage of the overall viewport width for uniform dimensioning.50vh Height for ImagesHalf of the screen’s height can be depicted by 50vh.
Employing vh facilitates optimal responsiveness across diverse devices.
Responsive functionality guarantees seamless operation on various platforms.
auto width: auto;
By embracing auto, image proportions remain intact without any distortions.
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>
<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>Here is the code for a .JS file: $(document).scroll(function (){ var menuheight= $('header').height(); var y = $(this).scrollTop(); if (y>(menuheight)) { $('.menu_nav_features').addClass ...
I am in the process of developing a rails app where I would like to include a side div for displaying news updates in a vertical feed style. I have made some progress with the layout, but now I am facing issues with finding a suitable news-ticker plugin th ...
I created a form with one input field and two buttons - one for checking in and the other for checking out using a code. However, when I submit the form, it leads to a blank page in the php file. What could be causing this issue? UPDATE After changing fro ...
Is there a way to prevent a div from moving when scrolling up or down without using the position:fixed property? When an element is fixed, the scroll bar disappears making it impossible to reach the element by scrolling. div{ position:fixed; top:1 ...
After browsing through numerous documentation websites, I have noticed that many of them share the same layout and features. This has led me to question whether there is a common library used by all these documentation sites. How do they achieve this unif ...
Within this code snippet, there are three buttons labeled P1, P2, and P3, each connected to a card div below them. On the right side, there is another div containing the text "TEXT SHOULD BE DISPLAYED HERE". The desired functionality is that clicking on an ...
My React App with Autocomplete feature is almost complete, but I need some assistance to double-check my code. https://i.stack.imgur.com/dhmck.png In the code snippet below, I have added a search box with the className "autocomplete" style. The issue I a ...
I've set up a navigation menu with mouseover and mouse leave events to toggle a dropdown by changing a boolean value. Now, I'm trying to apply different animations to the list items in the dropdown compared to the surrounding box, but I'm f ...
Currently, I am working on a mobile application that is HTML5 cross-platform compatible. To design the app, I am utilizing Bootstrap 3, although it seems unrelated to the specific issue I am facing. Here's the problem at hand: Within my application, ...
I'm trying to include a form from another file using ajax. It's a simple form that is activated by an onclick event defined as follows: <a href="javascript:void(0);" class="remitir" title="Reemitir Solicitud" data-id="'.$value['idso ...
My HTML is structured like this. <h2 class="mt-10 scroll-m-20 border-b pb-1 text-3xl font-semibold tracking-tight first:mt-0" id="know-your-life"> <a aria-hidden="true" tabindex="-1" href="#know-your- ...
Several weeks ago I posted a query (Table overflows parent div when td content is too wide) related to table design. The response I received seemed to resolve the issue perfectly. Now, as I attempted to redesign the table yesterday, I encountered a challen ...
Here is a jsfiddle link Please pay attention to Question 2 in the jsfiddle table, as it contains only one answer. In the jquery function, I have attempted to make the text input under the Marks Per Answer column readonly if a question has only one answer ...
Once I apply a class to my button element using JavaScript, the background image (.gif) that is supposed to display afterwards takes an unusually long time to render. The button serves as a form submission. Upon being clicked, a class of "clicked" is dyna ...
I am interested in creating a button that, when clicked, generates a new image upload button within a form I have already created in HTML. My goal is to figure out the best approach for this functionality, especially considering that there is a remove butt ...
I have been struggling to center an image within a div, but all the usual methods like using margin: auto; do not seem to work. I have tried various popular techniques with no success. <style> /* Add a black background color to the top navigation ...
For all you web development experts out there, I have a question regarding CSS styles. I often see precise pixel or percentage measurements used for properties like "padding" and "height." Experienced developers seem to effortlessly position their content ...
I am struggling to align three divs vertically without using position:absolute or flexbox, as they will affect other elements on the page that I cannot control. Here is the current code snippet: <div class="search-wrapper text-center " ...
I would like to determine the status of the image within the img tag using a flag called "imagestatus" in the provided code: echo '<a href="#" class="swap-menu"><img id="menu_image" src="images/collapsed.gif" hspace = "2"/>'.$B-> ...
Is there a way to center a number both vertically and horizontally within a div that needs to be 60px in width and height, shaped like a circle, and placed in the center of a table-cell? I've managed to center the div within the table-cell but can&apo ...