Question 244972 in Html Question posted in
Some basic documentation can be found here.

How to make image inside a div bigger in HTML

Here’s my issue, I’m gonna put my profile picture on my own portfolio website, but for some reason it’s really small.

Screenshot of the topnav bar

If I make the image bigger via width and height the topnav becomes bigger along with it. I want it to be a circled image that’s clickable. This is the HTML code that I have:

<!DOCTYPE html>

<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta content="text/html; charset=utf-8" http-equiv="content-type">
        <meta name="viewport" content="width=device-width, intial-scale=1">
        <link rel="stylesheet" href="styling.css">
    </head>
    <body class="bigbody" style="background-image: url('images/DSC_0761.JPG');">
        <div class="topnav">
            <a class="active" href="#home">
              <img class="profile" src="images/square-profile.jpg" alt="">
            </a>
            <a href="#news">Newz</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
          </div>
          <div class="mainbody"> 
            <h2 class="titlediv">Wag1 Bruda</h2>
          </div>
    </body>
</html>

And this is my CSS:

.topnav {
    background-color: rgb(37,37,37, .3);
    overflow: hidden;
    border-radius: 5px;
}
  
.topnav a {
    float: left;
    color: #ffffff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: 'Inter', sans-serif;;
}
  
.topnav a:hover {
    background-color: #1a1a1a;
    color: rgb(255, 255, 255);
    transition: 0.3s;
}

.topnav a.active {
    background-color: #1b1b1b;
    color: white;
}

body.bigbody {
    position: relative;
    background-size: cover;
}

div.mainbody {
    background-color: #00b7ff00;
    backdrop-filter: blur(5px);
    border-radius: 10px;
    width: 200px;
    height: 200px;
    margin: 500px;
}

h2.titlediv {
    font-family: 'Inter', sans-serif;;
}

img.profile {
    position: relative;
    width: 10px;
    height: 10px;
}

Hope that helps.

Tags:

3

Answers


  1. 0

    You need to remove (or reduce) the padding on the <a> element which contains your profile picture. One way to do that is to use the :has pseudo-class. More info here.

    body {
  background: #7d9ec1;
}

.topnav {
  background-color: rgb(37,37,37, .3);
  overflow: hidden;
  border-radius: 5px;
  display: flex; /* use flex instead of float */
  gap: 0.5em;
  align-items: center;
  padding: 0 10px;
}

.topnav a {
  color: #ffffff;
  text-align: center;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 17px;
  font-family: sans-serif;
  transition: 0.3s;
}

.topnav a:hover {
  background-color: #1a1a1a;
  color: rgb(255, 255, 255);
  border-radius: 5px;
}

.topnav a.active {
  background-color: #1b1b1b;
  color: white;
}

.topnav a:has(.profile) { /* targets an <a> element which contains a .profile element */
  padding: 2px;
}
  
img.profile {
  display: block;
  width: 40px;
  border-radius: 50%; /* makes the image a circle */
}
    <div class="topnav">
  <a href="#home"><img class="profile" src="http://picsum.photos/100" alt=""></a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>
    Login or Signup to reply.
  2. 0

    This problem is caused by the padding attribute you give to the "a" tags. Give the ".profile" class in the img tag to the "a" tag. and add the following css properties.

    .topnav {
  background-color: rgb(37, 37, 37, .3);
  overflow: hidden;
  border-radius: 5px;
}

.topnav a {
  float: left;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: 'Inter', sans-serif;
  
}

.topnav a:hover {
  background-color: #1a1a1a;
  color: rgb(255, 255, 255);
  transition: 0.3s;
}

.topnav a.active {
  background-color: #1b1b1b;
  color: white;
}

body.bigbody {
  position: relative;
  background-size: cover;
}

div.mainbody {
  background-color: #00b7ff00;
  backdrop-filter: blur(5px);
  border-radius: 10px;
  width: 200px;
  height: 200px;
  margin: 500px;
}

h2.titlediv {
  font-family: 'Inter', sans-serif;
  
}

.profile {
  height: 48px;
  width: 48px;
  padding: 4px !important;
  box-sizing: border-box
}

img {
  width: 100%;
  border-radius: 50%;
}
    <div class="topnav">
  <a class="active profile" href="#home"><img src="https://gaveinjaz.com/wp-content/uploads/2019/12/opulent-profile-square-07.jpg" alt=""></a>
  <a href="#news">Newz</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>
    Login or Signup to reply.
  3. 0

    Remove the width and height attributes from the img.profile in your CSS because they are currently set to a very small size (10px x 10px).
    css
    Define a size for your profile image using CSS. You can set the width and height in pixels or use other units like percentages.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search