2

Hi I have a div which is my nav bar, when I want to place my logos in the nav bar.

Code

<div class="first_bar">
      <img class="home" src="../../assets/Home Unclicked-01.png">
      <img class="energy" src = "../../assets/Enerygy panel Unclicked-01.png">
 </div>

.first_bar{
    background-color: #cdf7fb;
    height: 52px;
}

.home {
    width: 30px;
    height: 30px;
}

.energy {
    width: 30px;
    height: 30px;
}

I am taking this as my reference and want to create something like this. enter image description here

I am not able to put my icons as shown in the image above, how to size the icons do that it looks like the above.

sample image - enter image description here

can some one help me with this?

Thanks.

followed the answer given,

it looks like,

how to get the spacing around my logos,as shown in the first picture?

enter image description here

chink
  • 1,505
  • 3
  • 28
  • 70
  • currently, your images are set to be `30px` wide by `30px`high, is that what you want? see this [jsFiddle](https://jsfiddle.net/rwone/fm2t3986/). and is your desired behaviour to have *both* logos next to each and centered horizontally? – user1063287 Aug 18 '19 at 09:22
  • Your "home" logo is smaller than "energy panel" logo? – Robert Hovhannisyan Aug 18 '19 at 10:23
  • 1
    my home icon image is 130*163 px ; energy icon image is 283*163px – chink Aug 18 '19 at 10:27

1 Answers1

0

You can try to convert your images into divs and set height: 100%; and width: 105px; for divs and size your images whatever you want like this:

HTML:

<div class="first_bar">
  <div class="image-item">
    <img class="home" src="en.png">
  </div>
  <div class="image-item">
    <img class="energy" src = "en.png">
  </div>
</div>

CSS:

.first_bar{
  background-color: #cdf7fb;
  height: 52px;
}

.image-item {
  width: 105px;
  height: 100%;
  display: flex;
  align-content: center;
}

.home {
/*Your custom height and width for this image*/
}

.energy {
/*Your custom height and width for this image*/
}

EDIT: Increase or degrease your image sizes with percentage. For example your home icon you can change the height from 130px to 105px and calculate the width depended from decreased percent, in this case, it can be 131.6px.

For calculations, you can use online calculators like this one: https://percentagecalculator.net/

Robert Hovhannisyan
  • 2,938
  • 6
  • 21
  • 43