Restrict the dimensions of the image to fit within the div

I've been struggling to resize my LinkedIn logo on my website. I've attempted various methods, like using inherit and setting max height and width to 100%, but the logo keeps displaying at full size.

Do I need to use a different type of container?

body {
  background-color: #2e2e2e;
  margin: 0px;
}

a {
  color: rgb(0, 255, 234);
  text-decoration: none;
  font-family: FoundrySterlingOT3W03-Bold, FoundrySterlingOT3W10- Bold, Arial, Helvetica, sans- serif;
  font-weight: 900;
  right: 0px;
}

a:hover {
  color: white;
}

.linkedin {
  height: inherit;
  width: inherit;
}

.nav-custom {
  padding-top: 1px;
  height: 50px;
  position: relative;
  text-align: center;
}

.nav-custom>a {
  padding-left: 30px;
  padding-right: 30px;
}

.header {
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  z-index: -1;
  width: 100%;
  margin-top: -20px;
  max-height: 100px;
}
<div class="header">
  <img class="linkedin" src="linkedin logo.png">
  <nav position: fixed; class="nav-custom" ;>
    <a href=#home>Home</a>
    <a href=#skills>Skills</a>
    <a href=#about>About</a>
    <a href=#contact>Contact</a>
  </nav>
</div>
<link rel="stylesheet" href="Portfolio.css">>

htmlcss

Answer №1

Check out this solution for your needs:

I have placed the logo in the navigation section and adjusted its height and width in pixels

.linkedin {
  height: 40px;
  width: 40px; 
}

Additionally, I used flexbox to align it with other elements in the navigation bar

.nav-custom {
  padding-top: 1px;
  height: 50px;
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
}


  body {
    background-color: #2e2e2e;
    margin: 0px;
}

a {
    color:rgb(0, 255, 234);
    text-decoration: none;
    font-family: FoundrySterlingOT3W03-Bold,FoundrySterlingOT3W10- 
Bold,Arial,Helvetica,sans- 
serif;
    font-weight: 900;
    right: 0px;
}

a:hover {
    color: white;
}

.linkedin {
    height: 40px;
    width: 40px; 
}
.nav-custom {
    padding-top: 1px;
    height: 50px;
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
}

.nav-custom > a{
    padding-left: 30px;
    padding-right: 30px;
}

.header {
    background: rgba(0, 0, 0, 0.2);
    position: fixed;
    z-index: -1;
    width: 100%;
    max-height: 100px;

}   
<div class="header">
    <nav style="position: fixed;" class="nav-custom";>
      <a><img class="linkedin" src="https://cdn-icons-png.flaticon.com/512/174/174857.png"></a>
      <a href=#home>Home</a>
      <a href=#skills>Skills</a>
      <a href=#about>About</a>
      <a href=#contact>Contact</a>
    </nav></div>
<link rel="stylesheet" href="Portfolio.css">

Answer №2

width="value" height="value"
is a required addition for the 
<img class="linkedin" src="linkedin logo.png">
. It should be updated to 
<img class="linkedin" src="linkedin logo.png" width="value" height="value">
, making the complete code:

 <img class="linkedin" src="linkedin logo.png" width="value" height="value">
    <nav position: fixed; class="nav-custom";>
      <a href=#home>Home</a>
      <a href=#skills>Skills</a>
      <a href=#about>About</a>
      <a href=#contact>Contact</a>
    </nav></div>
<link rel="stylesheet" href="Portfolio.css">>  

   body {
    background-color: #2e2e2e;
    margin: 0px;
}

a {
    color:rgb(0, 255, 234);
    text-decoration: none;
    font-family: FoundrySterlingOT3W03-Bold,FoundrySterlingOT3W10- 
Bold,Arial,Helvetica,sans- 
serif;
    font-weight: 900;
    right: 0px;
}

a:hover {
    color: white;
}

.linkedin {
    height: inherit;
    width: inherit; 
}
.nav-custom {
    padding-top: 1px;
    height: 50px;
    position: relative;
    text-align: center;
}

.nav-custom > a{
    padding-left: 30px;
    padding-right: 30px;
}

.header {
    background: rgba(0, 0, 0, 0.2);
    position: fixed;
    z-index: -1;
    width: 100%;
    margin-top: -20px;
    max-height: 100px;

}

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

Design a background or overlay for modal using CSS styling

How do I add a backdrop color behind my React modal screen using just CSS, specifically positioning the overlay with white at .5 opacity behind the modal? .modal-footer-small width: 450px height: auto margin: 0 auto top: 53% left: 0 right: 0 ...

cssreactjsmodal-dialogoverlay

Apply specific margins to every second element in media queries using the margins that were previously set for every third element

Looking to adjust the margin for every second element instead of every third when using media queries. .title:nth-child(3n+3) {margin-right:0 !important} @media screen and (max-width:1160px) and (min-width:900px){ .title:nth-child(2n+2) {margin-right:0 ! ...

cssmedia-queriesmargin

The jQuery toggle function seems to be skipping alternate items

I have recently started learning Javascript and JQuery. Currently, I am working on creating a comment system where you can click reply to display the form. However, I'm facing an issue where the form only shows up for the first comment reply, not for ...

javascriptphpjqueryhtml

The html select option tag is automatically closed because of the presence of the "/" character within the dynamic value in JSP and JSTL

<select id="ordersSelect" class="drop-down" onchange="somemethod()"> <c:forEach items="${orders}" var="order" varStatus="orderStatus"> <option value="${order.id}"> ${order.publicId} </option> </c:forEach> </select> ...

htmljspjstlhtml-select

performing a GET request directly from a <script> element in the index.html file

I am currently developing an application that utilizes Angular.js on the client side and Node Express on the server side. On my server side, I am using a staticAsset module. Within my index.html file, I have a lengthy list of JavaScript files that need t ...

javascripthtmlnode.jsangularjsexpress

Tips for creating a vertical scrollbar within a row component

Is there a way to create a scrollable parent v-row with a child v-row overflowing with content so that I can nest another v-row inside the v-col and ensure it remains within the scroll element? <v-row> <v-col> <v-row> <p ...

htmlcssvue.jsoverflow

Include a clickable hyperlink within a column in JQGrid that, when clicked, triggers a specific Jquery function

I am dealing with a JQgrid that only has 5 columns. Below is the code I have attempted: jQuery("#grdAnn6InvstDetails").jqGrid({ url: RootUrl + 'FDIAS/Ann6InvDtlsGridData', datatype: 'json', mtype: 'POST&ap ...

javascriptjqueryhtmlhyperlinkjqgrid

Using Javascript to automatically submit a form when the enter key is pressed

Can anyone help me with a password form issue? I want the enter key to trigger the submit button but it's not working for me. I understand that the password can be viewed in the source code, this is just for practice purposes. <!DOCTYPE html> & ...

javascripthtmlcssenter

Transforming the NavBar in React: A guide to dynamically updating values

I am facing an issue with my NavBar that changes based on certain events. The current setup works fine, but I don't want to render it in every class that loads a new page. Initially, I had the NavBar rendering inside App.js so it could appear on all p ...

javascripthtmlcssreactjs

Is it possible to use JavaScript to toggle mute and unmute functions on an iPad?

Seeking assistance with managing audio on an iPad using JavaScript (mute/unmute). Any suggestions or advice would be greatly appreciated. ...

javascriptjqueryhtmlipad

What are some ways I can optimize my Bootstrap CSS code to enhance responsiveness across different page widths?

After creating this fiddle, I noticed that my webpage layout with two texts stacked on top of each other looks great on wide screens. However, when the screen size is reduced or viewed on a mobile device, the layout gets all messed up. Take a look at this ...

javascriptjqueryhtmlcsstwitter-bootstrap

My JavaScript seems to be having an issue with .className - can anyone help me troubleshoot

I'm currently working on a navigation menu, and my objective is to have the class change to .nav-link-active when a link is clicked, while also reverting the current .nav-link-active back to .nav-link. Here's the code snippet I am using: <he ...

javascripthtml

Ways to ensure that a URL is distinct once a link has been clicked

On my website list.php, I have a code snippet that changes the video in an iframe when a link is clicked. However, the URL remains as list.php instead of changing to something like list.php/Anohana10. How can I update the URL to reflect the selected video? ...

javascriptphpjqueryhtml

When the FLASK button is triggered, retrieve data from the FLASK and display it

This is a unique test where I will create a button to retrieve information from a MySQL database. However, it's important to first understand this concept. So here is my custom text within the Flask framework: @app.route('/pythonlogin/home', ...

pythonhtmlflaskpost

Perform different actions based on the state of a Vue JS checkbox: "Do This" when checked and

Attempting to create a checkbox that triggers one function when initially checked, and another when it is unchecked. I have tried the following approach. There is also a variable that has been read out and reflects the current status: <input type=" ...

htmlvue.jscheckbox

Utilize the Tab feature effectively in Impress.Js

Currently, I have disabled the Tab key in Impress.js so that it only moves to the next slide. However, when I try to focus on links and delete this code to let it behave normally, Impress.js crashes. Has anyone found a workaround for this issue? Appreciat ...

javascriptcssimpress.js

Open the iframe link in the main window

As a newcomer to this platform, I am trying to figure out how to make a link open in the parent page when clicking a button within an iframe. Currently, my code opens the link in a new window. <html> <body> <form> <div class ...

javascripthtmliframe

Obtaining data from HTML tags using Beautifulsoup

Here is the complete HTML code that I am currently working with. Below is a simplified version of the HTML provided above: <table class="premium"> <tr class="retailer top-offer" data-pricer="47.84" saler-id=" ...

pythonhtmlparsingbeautifulsoupextract

Selecting multiple objects in FabricJS on mouse click

Can anyone provide suggestions on how to select multiple objects on a canvas with a mouse click? I only want to select objects that overlay the point. From my understanding, the target of the mouse event is always the top-most object. I have tried binding ...

javascripthtmlcanvasfabricjs

The functionality of jQuery field validation is impaired when interacting with Chrome's autofill feature

Despite adding the autocomplete="off" attribute to both the form and inputs using html5, I'm still unable to prevent Chrome autofill from interfering with the form submission process. In addition to this issue, I have implemented a basic jQuery field ...

jqueryhtmlgoogle-chrome