Hello! Please tell me how to realize the dynamic scale of the image in the header of the site? Honestly, I tried many things, but did not achieve the desired result. Wordpress website. An example of my problem:

HTML code:

<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 code:

If I do in the block

 header, img { wight 10%; }

so the scale of the picture changes, but it applies this size to all pictures img , not only in the header . How can I apply this attribute only for images that are located in the header?

    2 answers 2

    You can also make an id at the picture itself, and by using it you can set the selector

     <img id="header-img" src="..."> #header-img { width:10%; }

    or through class

     <img class="header-img" src="..."> .header-img { width:10%; }
    • Your reception also tried, it works, thanks) - Anton Kondrushin

    Good day! Assign a class to a block that wraps the image and push it off in the CSS selector, making it more specific.

     <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

    • Yes, thank you, so much better) Everything works. - Anton Kondrushin