Правило определения размера изображения не применяется при определении в файле scss, но работает в теге html

#html #css #sass

Вопрос:

Я новичок в SCSS и разработке интерфейсов в целом. У меня есть это простое правило, определенное в .scss файле.

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

Моя цель-создать класс, содержащий изображение моего заголовка, чтобы я мог использовать его для каждого заголовка на разных страницах.
Проблема в том, когда я использую это правило вот так:

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

Изображение визуализируется, но height ограничение не применяется.

Когда я удаляю класс, чтобы иметь что-то вроде этого:

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

Это height ограничение хорошо применяется. Я немного сбит с толку, некоторые объяснения были бы очень полезны.

1. Попробуйте width: auto; установить высоту после этого в SCSS. Или width: 100% , может быть, это тоже могло бы сработать. Я также задаюсь вопросом о решении 🙂

2. Я попробовал и то, и другое, но результат был один и тот же. То, что я сделал, это: .header-logo { content: url("/assets/logo/logotype-blue.png"); width: 100%; height: 40px; }

3. Я также провел некоторые исследования, но не смог найти ничего, что имело бы смысл. Возможно, используйте src атрибут вместо добавления изображения со content свойством. что-то вроде этого. <img src="/assets/logo/logotype-blue.png" class="header-logo"> и примените header-logo класс без content .

4. Спасибо, но я хотел бы избежать такого подхода. Моя цель состоит в том, что если в один прекрасный день мне придется изменить изображение, я сделаю это в одном месте (файл .scss).

5. Таким образом, вы можете использовать backgrond-image свойство вместо content . Я думаю, это сработало бы. Я не вижу особого такого content подхода. background-image кажется, более распространенный подход. content обычно удобно при использовании ::before или ::after .

Ответ №1:

попробуйте использовать подобный класс в элементе Div, а не в теге img.

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