html - CSS 图像改变大小

Question

我想要 500 像素的小尺寸，照片更改为 50 像素，但调整大小不起作用，不透明度起作用。
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;
  }
}

Answer 1

图像标签有自己定义的高度和宽度属性，例如:

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

像上面那样定义高度/宽度并用您的媒体查询覆盖它们确实可以正常工作。

如您的代码所示，使用具有样式属性的内联样式可防止覆盖高度/宽度样式。如果您仍希望使用内联样式，请在您的媒体查询 CSS 中使用 !important，例如，

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