When the height is set to 100vh, the Div and Image appear misaligned vertically

Could someone explain why there is a vertical separation between the div and the image? 

<div style="height: 100vh; display: inline-block;width: 50%; background-color: blue">TEST
</div><!--
--><img src="photos/openening.jpg" alt="SICK SHOT" style="height:100vh; display: inline-block; width: 50%; object-fit:cover;">

When I view the website, it appears like this:
Image (I used a black image for this example.)


If you can explain why this happens, could you also provide a solution to make both elements start at the same height? I would like it to resemble the layout of this website:
petermckinnon

I am open to alternative suggestions as well.

htmlcssdisplayobject-fit

Answer №1

The reason for this is that the vertical alignment property of the image aligns it with the top of the div. I have made the necessary correction in the revised example below:

<div style="height: 100vh; display: inline-block;width: 50%; background-color: blue">TEST
</div><!--
--><img src="photos/openening.jpg" alt="SICK SHOT" style="height:100vh; display: inline-block; width: 50%; vertical-align:bottom; background: black; object-fit:cover;">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The timer freezes briefly at 1:60 before switching to 1:01

I'm in the process of creating a website for Rubik's cube scrambling and timing, and everything seems to be working well so far. I have implemented a scrambler, a timer, and a list of recorded times (still a work in progress). The timer is functi ...

javascripthtml

How can you apply margin to an element within a column in Bootstrap 4?

Within a column, I have several span elements: <div class="container-fluid"> <div class="row"> <div class="col"> <span class="myClass">some text</span> <span class="myClass">some text</span> ...

htmlcsstwitter-bootstrapbootstrap-4

Angular Placeholder Positioned at the Top

Hello, I am a beginner in Angular and need to create an input field that looks like this: Everything is going fine except for the Vorname placeholder at the top. How can I place it there? Currently, I am utilizing Angular Materials. <div class='g ...

htmlcssangular

Revised: "Redesigned CSS class names taken from a

I created a React component library using mantine with @rollup package. This library comprises custom components styled with styled-components and CSS module (.module.css) files. All the css modules are bundled in javascript and injected into the body htm ...

cssreactjsnext.jsrollup

Firefox Flaw: Animation Issues with CSS

My Website has a CSS animation that creates a hover effect on a button. While the animation looks good in Chrome and IE, I encountered an issue with Firefox. Some white pieces are still visible after hovering. Here is the Animation CSS: .Hotel:hover{ ...

csscss-animations

Retrieve the position of an element using Python and selenium

Currently, I am working on a project and need to extract the location and size of an element using the following xpath: "//div[@class='titlu']" Upon inspection, it appears that the element is visible with no distinct features. However, I have e ...

pythonhtmlseleniumselenium-webdriver

The JavaScript code is not running as expected!

i have this index.html file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" ...

javascripthtmlcssxmlsvg

JavaScript functions do not work within the HTML code

I am currently working on my debut website and I'm facing an issue with the JavaScript file not functioning properly. Is there a chance you can help me troubleshoot this? I'm still in the learning stages of programming. This is the HTML content ...

javascripthtmlcss

Angular routing does not properly update to the child's path

I've organized my project's file structure as follows: app/ (contains all automatically built files) app-routing.module.ts components/ layout/ top/ side/ banner/ pages/ ...

javascripthtmlangular

Exploring the world of animation with Jquery and images

I'm delving into the world of jQuery to create some captivating animations. Currently, I've been tasked with an assignment involving images that expand, contract, change opacity, and eventually hide. Below is my code snippet: function play_pic1 ...

jqueryhtmlcss

contrasting ionic and android software development kits

I am interested in developing an android application and have some knowledge about Ionic, which is also used for creating mobile apps. I have more experience with Android development and am curious to understand the distinctions between the two platforms ...

javaandroidangularjshtmlionic-framework

I am having trouble with the Bootstrap 5 column not functioning properly within my design

Currently working on a project with Bootstrap, where I am trying to create a footer that looks like the one in the image below: https://i.stack.imgur.com/XIbDk.png Below is the HTML code snippet for my footer: <footer class="footer"> <div class ...

htmlcsstwitter-bootstrap

Is there a way to mimic this type of scrolling effect?

Upon visiting this website, it is evident that the entire interface has been constructed with React. The scrolling experience on this site is exceptionally smooth, although it may feel slightly more substantial than a typical scroll. After researching onli ...

javascriptjquerycss

Obtain the value of "data-something" attribute from an <option> element within a <select> element

Can anyone help me with this HTML snippet? <select id="something"> <option value="1" data-something="true">Something True</option> <option value="2" data-something-else="false">Something Else False</option> </selec ...

javascriptjqueryhtmlcustom-data-attributejquery-data

jquery carousel slider dynamically append

I have been tasked with creating a dynamic carousel using jQuery AJAX, and my supervisor recommended that I utilize the .append() method. Below is the HTML code for my carousel: <div id="myCarousel"> </div> <div cla ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Shorten the content while preserving the HTML using JavaScript

When printing a string containing HTML links, I need to truncate the visible text while preserving the link structure. Simply using a substring method would disrupt the HTML tags in the string. I aim to display only 100 characters but also remove any inc ...

javascripthtmlsubstringtruncatesubstr

Populate a table dynamically in JavaScript using a variable

I have a table with IDs such as r0c1 = row 0 column 1. I attempted to populate it using the following script, but it doesn't seem to be functioning correctly: var data = new Array(); data[0] = new Array("999", "220", "440", "840", "1 300", "1 580", " ...

javascripthtmlhtml-table

Ways to declare a function within the events onMouseOver and onMouseOut

<div align="right" style="border:1 #FF0 solid; background-color:#999" onMouseOver="javascript: function(){this.style.backgroundColor = '#DDD';}" onMouseOut="javascript: function(){this.style.backgroundColor = '#999';}"> Register & ...

javascripthtmlcss

The method provided by the FullScreen API is not effective in cancelling the fullscreen mode

After testing my code in Google Chrome, I encountered the following error message: Uncaught TypeError: Object #<HTMLDivElement> has no method 'webkitCancelFullScreen' Interestingly, I also received a similar error while running the code i ...

javascripthtmlfullscreen

Add hyphens to separate the words in AngularJS if there is a break in the string

Within a div of set width, a string is being bound to it. This string could be short or long. I would like for the string to break with a hyphen inserted on each line except for the last one. For example: If the string is "misconception" and it breaks at ...

javascriptjqueryhtmlcssangularjs