title: how to change the img element in css
body: <p>I am altering an website, there are a few picture element there, see below:</p>
  <p><a href="https://i.stack.imgur.com/Z15jC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z15jC.png" alt="enter image description here" /></a></p>
  <p>I want to make the above picture bigger, as it has a much larger resolution.</p>
  <p>this is the code in the index.html file</p>
  <pre><code>&lt;div class=&quot;col-lg-6 order-lg-last&quot;&gt;
     &lt;div class=&quot;gfx py-4&quot;&gt;
         &lt;img src=&quot;images/azalea/gfx-e.jpg&quot; alt=&quot;gfx&quot;&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>So I found the img element in css file.</p>
  <p><code>img { max-width: 100%; height: auto; }</code></p>
  <p>if I changed the <strong>max-width</strong> to 150%, this pic does become bigger. But there are other picture using the same <code>img</code> element, they become bigger as well... which is not want I want...</p>
  <p>How can I set up a css img element to be used only by this picture?</p>
  <p>Thanks</p>