1

Всем привет! подскажите пожалуйста как реализовать динамичный масштаб картинки в шапке сайта? Честно сказать много чего перепробовал, но так и не добился нужного результата. Сайт на wordpress. Пример моей проблемы:

Код HTML:

<div id="header" <img src="http://uvovng.000webhostapp.com/wp-admin/images/gerb1.png" 
     width="150" height="160" style="position:absolute; top: 30px; left: 20px;>

Код CSS:

Если делаю в блоке

header, img {
  wight 10%; 
} 

так меняется масштаб картинки, но этот размер он применяет ко всем картинкам img, не только в header. Как мне применить этот атрибут только для картинок которые расположены в шапке?

2 ответа 2

4

Добрый день! Назначьте блоку, который оборачивает картинку, какой-то класс и оттолкнитесь от него в селекторе CSS, сделав его тем самым более специфичным.

<div id="header" class="header">
   <img src="http://uvovng.000webhostapp.com/wp-admin/images/gerb1.png" width="150" height="160"/>
</div>

<style>
    .header img {
        width: 10%;
    }
<style>

https://codepen.io/Nick_Gromov/pen/gemBqz

1
0

Можно ещё у самой картинки сделать id, и по нему уже задавать селектор

<img id="header-img" src="...">

#header-img {
  width:10%;
}

или через класс

<img class="header-img" src="...">

.header-img {
  width:10%;
}
1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.