1

I am new to SCSS and frontend development in general. I have this simple rule defined in a .scss file.

.header-logo {
  content: url('/assets/logo/logotype-blue.png'); 
  height : 40px; 
}

My goal is to have a class containing my header image so I can use it on every header in different pages. The problem is when I use that rule like this:

 <img class="header-logo" alt="logo"/>

The image is rendered but the height constraint is not applied.

When I remove the class to have something like this:

 <img src="/assets/logo/logotype-blue.png" height="40" alt="logo"/>

The height constraint is well applied. I am a bit confused, some explanations would be very helpful.

akuma8
  • 4,160
  • 5
  • 46
  • 82
  • Try `width: auto;` and set height after that in SCSS. Or maybe `width: 100%` could also work. I am also wondering the solution :) – Muhammedogz Sep 20 '21 at 23:27
  • I tried both but same result. What I did is: `.header-logo { content: url("/assets/logo/logotype-blue.png"); width: 100%; height: 40px; }` – akuma8 Sep 20 '21 at 23:35
  • I also made some research but couldn't find anything that make sense. Maybe use `src` attribute instead of adding image with `content` property. something like this. `` and apply `header-logo` class without `content`. – Muhammedogz Sep 20 '21 at 23:39
  • Thanks but I would like to avoid that approach. My goal is that if a day I have to change the image I will do it in one place (the .scss file). – akuma8 Sep 20 '21 at 23:41
  • So you can use `backgrond-image` property instead of `content`. It would work I think. I don't see much that `content` approach so much. `background-image` seems more common approach. `content` is usually handy when using `::before` or `::after` . – Muhammedogz Sep 20 '21 at 23:48
  • Check this: https://stackoverflow.com/questions/20027814/image-and-text-as-value-of-content-property and this: https://stackoverflow.com/questions/17907833/content-url-does-not-display-image-on-firefox-browser and also this: https://stackoverflow.com/questions/8977957/can-i-change-the-height-of-an-image-in-css-before-after-pseudo-elements so much this :) – Muhammedogz Sep 20 '21 at 23:48
  • @Muhammedogz I tried several possibilities but none works :( ! – akuma8 Sep 21 '21 at 17:20

1 Answers1

0

try a class like this on a Div element, not img tag.

.sizeMe{
    height: 40px;
    width: auto;
    background-image:  url('/assets/logo/logotype-blue.png');
    background-repeat: no-repeat;
    background-size: contain;
}
CocoBean
  • 1
  • 2