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

Can you target an 'input' field that is within a component conditionally rendered using 'v-if'?

Imagine this vue.js template code: <div v-if="y===0"> <input ref="textbox">{{textbox}}</input> </div> In the scenario where y is data retrieved asynchronously, Is there a way to direct focus to the 'input' element onc ...

javascripthtmlasynchronousvue.jsfocus

What is the best way to use jQuery to retrieve information from one child element in an XML API in order to locate another child

Hi there, I'm new to jQuery and could use some help. I'm attempting to retrieve specific information like CPU and RAM details from a particular phone model. I've written the jQuery code, but I'm having trouble displaying the RAM and CPU ...

javascripthtmljqueryxmlapi

Fill in input field based on choice from the drop-down menu - JavaScript

I am facing an issue where I cannot add text inside the text box based on the dropdown selection. For example, if I select option2 from the dropdown, the textbox should be populated with option2. (function() { 'use strict'; setInterva ...

javascripthtml

How can you prioritize one CSS file over another?

To avoid repetition, I wish to have all the classes, tags, and ids from css.css take precedence over bootstrap.min.css, without duplicating any from bootstrap.min.css. <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/css.css ...

htmlcss

What is the best way to include overflow-hidden in the image displayed by the tailblock component?

I have implemented the following Tailblock component, which is built on tailwind.css. My goal is to achieve a hover effect where the image scales up within its original dimensions. I want the image to zoom in without changing its height and width. I atte ...

htmlcsstailwind-csstailwind-ui

Request financial data from AlphaVantage using PHP

I'm currently working on utilizing the alphavantage API to retrieve currency exchange information. In order to obtain the desired data, I am using the following query URI: https://www.alphavantage.co/query?function=CURRENCY_EXCHANGE_RATE&from_cu ...

javascriptphphtmljsonajax

The button now has a stylish 5px border, making it slightly larger in size. However, it seems

How can I add an active class with a 5px border-bottom on a button without increasing the button size by 5px? The box-sizing property is not working for me. Is there a simple solution to achieve this? *, *:after, *::before { -webkit-box-sizing: border ...

htmlcss

How can I modify the appearance of a slider's range?

I'm struggling with customizing the style of a price slider input range. No matter what I do, the changes don't seem to take effect. Can anyone pinpoint where I may be going wrong? Appreciate any guidance on this! Thank you! <div class=" ...

javascripthtmljquerycssslider

Adjusting the characteristics of a class when hovering

Is it possible to change the CSS property of a class when hovering over another class in CSS? #_nav li { display:inline; text-decoration:none; padding-top:5vh; line-height:8vh; margin-right:5vh; cursor:pointer; } #_nav li:hover + ...

jqueryhtmlcsscss-selectors

How to Manage Empty Lines in HTML Documents within WordPress

Just recently, I launched my brand new website. Everything seems to be functioning properly except for one issue that I discovered in the HTML source code. There are 15 blank lines before "<!doctype html>", which is causing some problems with SEO and ...

phphtmlwordpresswoocommerceblank-line

Tips for creating Java code that generates visually appealing colored HTML from JSON data include:1. Use libraries like Gson or Jackson

On certain pages dedicated to our API, such as for sales, we want to showcase JSON examples. We are looking for a nicely formatted display with color-coded spans. While the option of using the JavaScript code prettifier from this archived and unmaintaine ...

javahtmljson

Javascript - Button animation malfunctioning after first click

One issue I'm facing is with an animation that is triggered using the onmousedown event. Another function is supposed to stop the animation when onmouseup is detected. The problem arises after the first time it works correctly. Subsequent attempts to ...

javascripthtmlcssanimation

Tips for updating the background color of a dropdown menu in the navigation bar

I am attempting to increase the size of the dropdown menu and change its background color. Currently, I can only modify the color of the links and the surrounding area. .navbar a { width: 125px; text-align: center; ...

htmlcssbootstrap-4

What is the best way to create a centered vertical line with text in the middle?

I attempted to replicate a form that contains a vertical line <span class="vertical-line">or</span> with text centered in it! How can I create a similar appearance like this form? I considered using hr but it generates a horizontal ...

htmlcss

Turning off and on CSS transitions to set the initial position

Is there a way in javascript to position divs with rotations without using transitions initially for an animation that will be triggered later by css transition? I have tried a codepen example which unfortunately does not work on the platform but works fin ...

javascriptcsscss-transitions

I am getting text content before the input element when I log the parent node. What is causing this issue with the childNodes

Does anyone know why 'text' is showing up as one of the childNodes when I console.log the parent's childNodes? Any tips on how to fix this issue? <div id="inputDiv"> <input type="text" id="name" placeholder="Enter the nam ...

javascripthtmlcssdomnodelist

Access and retrieve data from a string using XPath with JavaScript

My HTML page content is stored as a string shown below: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </ ...

javascripthtmlxpath

Python code encountered an issue while trying to find the element with the locator //input[@name="session[username_or_email]". The element could not

I have recently started learning about selenium and web scraping in general, and today I attempted to follow a tutorial on selenium that included the following command: from selenium import webdriver driver = webdriver.Firefox() driver.get("https://t ...

pythonhtmlselenium

The Font Awesome icon is not displaying on top of the Materialize CSS progress/determinate bar

I am struggling to display a Font Awesome icon on top of a Materialize CSS progress/determinate div. Unfortunately, the icon is not fully visible and part of it gets clipped or hidden. Despite trying various solutions, I have not been successful. .progres ...

cssfont-awesomematerialize

Creating a proper nth-child CSS for multi-level HTML elements involves understanding the structure of the elements

My current project involves a screen where widgets can be dynamically inserted into the DOM. I am looking to adjust the z-index based on the number of times the class decrement-z-index appears. This is the CSS code I have written in an attempt to achieve ...

htmlcss