CODEWITHSUNDEEP
htmlcsscss-selectors
Frank
Frank

Reputation: 119

Trying to select an <img> in css and change the size

So what I'm trying to do is select an img tag and change the size of it, I tried to use a class selector and id but they don't seem to work, I got this to work locally but as soon as I upload it to the server the css doesn't take effect

html

<div id="logo3">
  <img src="img/fehr.png" alt="logo">
</div>

css I tried but doesn't work:

img[src="img/fehr.png"] { 
  height: 90px; 
  width: auto;
}
img[alt~="logo"] { 
  height: 90px; 
  width: auto;
}
#logo3 { 
  height: 90px; 
  width: auto; 
}

css that works:

img { height: 90px; width: auto; }

but I want to use a selector incase I add more images later.

Upvotes: 3

Views: 1618

Answers (2)

DevWL
DevWL

Reputation: 18840

This works for me ...

html

<div id="logo3"><img src="img/fehr.png" alt="logo"></div>

css

img[src="img/fehr.png"] {
     height: 100px;
     width: auto;
     background-color: red;
}

//the other two also works

Try adding '!important' on the end, and check if nothing overwrite your css.

img[src="img/fehr.png"] {
     height: 100px!important;
     width: auto!important;
     background-color: red!important;
}

Upvotes: 0

10K35H 5H4KY4
10K35H 5H4KY4

Reputation: 1526

You can Try

#logo3 img{
    height: 90px; width: auto;
}

Or with Jquery

$('#logo3 img').css('height','90');

Upvotes: 1

Related Questions