CSS image change size

Question

I want 500px for a smaller size, photos changed to 50px, but resizing doesn't work, opacity works.
HTML

<img class="demo cursor" src="01.jpg" style="width:120px;height:85px" onclick="currentSlide(1)" alt="1">
<img class="demo cursor" src="02.jpg" style="width:85px;height:85px" onclick="currentSlide(2)" alt="2">
<img class="demo cursor" src="03.jpg" style="width:113px;height:85px" onclick="currentSlide(3)" alt="3">
<img class="demo cursor" src="04.jpg" style="width:146px;height:85px" onclick="currentSlide(4)" alt="4">
<img class="demo cursor" src="05.jpg" style="width:126px;height:85px" onclick="currentSlide(5)" alt="5">

CSS

@media screen and (max-width: 500px) {
  img.demo.cursor {
    opacity:0.2;
    width:50px;   
    height:50px;
  }
}

Don't use inline styles. But if you have to, use `!important`. https://stackoverflow.com/questions/16813220/how-can-i-override-inline-styles-with-external-css — radulfr, Nov 10 '19 at 17:56
so this is the main reason? if I distribute inline styles to css should everything be correct? — vmahth1, Nov 10 '19 at 17:57
Have a look at [MDN's article on selector specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) — Xander, Nov 10 '19 at 17:58
Yes, inline styles override styles in your stylesheet (unless !important is used). — ajobi, Nov 10 '19 at 17:59

score 1 · Accepted Answer · answered Nov 10 '19 at 18:04

Image tag has itself height and width attributes defined for eg:

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

Defining height/width like above and overriding the same with your media query does works fine.

Having inline styles with style attribute as shown in your code prevents overriding the height/width styles. If you still wish to go with inline styles then use !important in your media query CSS something like,

@media screen and (max-width: 500px) {
 img.demo.cursor {
    opacity:0.2;
    width:50px !important;   
    height:50px !important;
  }
}

CSS image change size

1 Answers1