What is the best way to center and adjust the size of an image in a jumbotron?

I need some assistance with centering and resizing an image above my navigation bar. I want the image to be positioned right above the navigation bar, similar to how it appears on other websites. Can anyone help me achieve this?

.jumbotron {
  text-align: center;
}

.navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  font-size: 20px;
}

.navbar-default {
  background-color: white;
  border-color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="jumbotron">
  <img src="https://images.unsplash.com/photo-1551308719-c0e80e6becc9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" width="200px">
</div>

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <ul class="nav navbar-nav navbar-center">
      <li><a href="#">HOME</a></li>
      <li><a href="#">COLECTION</a></li>
      <li><a href="#">SHOP</a></li>
      <li><a href="#">CONTACT US</a></li>
    </ul>
  </div>
</nav>

htmlcssbootstrap-4

Answer №1

It can be challenging to find the perfect solution for the dimensions of the image you have chosen. Stretching the image to 100% width and adjusting only the height of the jumbotron may result in distortion. If you prefer not to have the image height fill the entire screen, you can try the following approach: 

.jumbotron {
  background: url(https://images.unsplash.com/photo-1551308719-c0e80e6becc9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80);
  background-size: cover;
  background-position: center;
  min-height: 400px;
}

.navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  font-size: 20px;
}

.navbar-default {
  background-color: white;
  border-color: white;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" media="screen" href="./style.css">
</head>
<body>
<div class="jumbotron">
</div>
<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <ul class="nav navbar-nav navbar-center">
      <li><a href="#">HOME</a></li>
      <li><a href="#">COLECTION</a></li>
      <li><a href="#">SHOP</a></li>
      <li><a href="#">CONTACT US</a></li>
    </ul>
  </div>
</nav>
</body>
</html>

Answer №2

For effectively aligning and resizing images in your jumbotron, you can use the following CSS:

.jumbotron img{
  width:100%;
  height: auto;
}

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

"Chrome experiences issues with onmouseover functionality when navigating away from a page or posting content

I'm experiencing an issue with a page where I have onmouseover and onmouseout attributes set for pictures. When submitting, the onmouseover and onmouseout events cause the images to fail, resulting in the image source not found icon being displayed. ...

javascripthtmlonmouseoveronmouseout

Unable to locate the included file

When trying to add messages to my ejs template welcome.ejs from messages.ejs, I use the following include method: <%- include ('views/partials/messages.ejs;') %> '''https://i.sstatic.net/OYHZO.png Here are all the files in ...

htmlnpmejs

Ways to stylize bullet points in lists with CSS in HTML document

I am currently working on a Q&A page using simple HTML. This is the current appearance of my page. Check it out here on JSFIDDLE. My task involves adding an 'A' to the answer for each question. Some answers have multiple paragraphs, so the ...

htmlcss

What is the process for eliminating an attribute using adblock?

Is it possible to eliminate specific attributes with an ad blocker on a webpage? I am specifically interested in removing the title attribute, as shown in this example: <p title="Free Web tutorials">W3Schools.com</p> After applying the ad blo ...

jqueryhtmlgoogle-chrome-extensionadblock

The process of uploading images to a server by making an AJAX call to a PHP file

I have an input file and I want to upload the attached file to the server with a message saying "uploaded successfully" when I click on the upload button. However, I am getting a "file not sent" message. (The uploaded images need to be saved in the uploa ...

javascriptphphtmlajax

The removal of a JQuery element can result in causing the webpage to become unresponsive and lead to

When attempting to create a loop in JQuery to remove elements from my HTML, I encountered an issue where the function caused my browser to hang and become unresponsive. Here is the JQuery code I used: function removeElement(){ var i =0; ...

javascriptjqueryhtml

Use a CSS rule only if the element is not nested by using the :not selector

Could use some assistance with this coding issue: .element { border: 1px solid red; display: block; } I want to exclude this rule when .element is a descendant of .no-border using the :not pseudo-selector. For example: <div class="element">I ...

htmlcss

capturing webpage content with javascript for use in a screenshot

Is there a way to capture a screenshot of a webpage using JavaScript and utilize the canvas tag for this purpose? I attempted to use the html2canvas plugin in the past, but found it lacking in power. I would like to achieve this without relying on extern ...

javascriptjqueryhtmlcanvaswebpage-screenshot

What is the best way to adjust viewport settings for child components, ensuring the container size is set to 100vw/100vh for all children

Within my project, I have connected the react-static repository with the react repository using yarn link. "react": "^16.13.1" "react-static": "^6.0.18" I am importing various components from the react-static reposi ...

javascripthtmlcssreactjsviewport-units

Is it possible for me to convert the contents of a <div> into a rasterized image when printing?

I have been using jquery.printElement.js to print a custom calendar table that I created. The functionality inside a div is mostly working as expected, but I am facing some challenges with the CSS. Despite passing along all necessary .css files, my cells a ...

jqueryhtmlcssprintingrasterizing

Harnessing the power of external Javascript functions within an Angular 2 template

Within the component, I have a template containing 4 div tags. The goal is to use a JavaScript function named changeValue() to update the content of the first div from 1 to Yes!. Since I am new to TypeScript and Angular 2, I am unsure how to establish comm ...

javascripthtmlangulartypescript

In a React application, adjusting the main container height to 100vh results in the window.scrollY position being set to

I was facing problems with flashing on the Safari/Firefox browsers. By setting the main container height to max-height: 100vh, I managed to resolve the flickering issue. However, I am also looking for a solution to keep track of the window.scrollY positi ...

cssreactjsfirefoxsafariflicker

Aligning elements next to each other in html / css without using any top margins

How can I arrange four blocks of text side-by-side, center them over a background image, and ensure they respond well on different screen sizes without using tables? I typically use tables for this layout, but I've heard that CSS/HTML5 can achieve th ...

csshtml

Ways to define the background color of a form group

I am trying to customize the background color of a form-group element. To illustrate my point, take a look at the image below In the image above, I have highlighted the div in question and I want to change its background color from within the form-group. ...

htmlcsstwitter-bootstrap-3

Toggling with Jquery when an image is clicked

I'm trying to wrap my head around the functionality of jquery toggle. My goal is to toggle to the next anchor element with the class plr-anchor when an image with the class go_down is clicked. The information is being populated using maps. Javascript ...

javascriptjqueryhtmlreactjstoggle

Changes in browser size will not affect the height

Is there a way to smoothly change the height of the navigation bar when resizing the browser? Currently, it snaps to the new height when the width goes below or above 1000px. Any suggestions? nav.cust-navbar { -webkit-transition: height 2s; tran ...

htmlcssmedia-queries

Initially, my PDF file does not get selected, except in the Internet Explorer browser

I am currently facing an issue with selecting PDF files in Internet Explorer. The process works smoothly in Google Chrome, but I encounter a problem when trying to select PDFs in IE. Specifically, when I attempt to select a PDF for the first time in Inter ...

javascriptjqueryhtmlinternet-explorer

How to implement pagination for JSON response data

I am currently developing an application that requires making a call to a URL in order to retrieve a JSON response. To handle the large amount of data received, I am utilizing Handlebars.js to create list items and then appending them to a unordered list ( ...

javascriptjqueryjsonhtmlhandlebars.js

Input Form Label inexplicably rounded off at odd location

I've been utilizing Bootstrap to style my page, and I used the input form classes provided by Bootstrap to create this input field. However, upon loading the page, I noticed some strange rounding occurring between the label and the input space. http ...

htmlbootstrap-5

Column Flow in CSS Grid: Maximizing Auto-Fit - How to Optimize Row Layouts?

Having some trouble understanding how auto-fill and fit work in grid layouts. I am familiar with basic CSS, but new to working with grid layouts. I have a set of checkbox items with labels that I want to display in columns depending on screen size, with c ...

csscss-gridgrid-layout