html - 如何更改 元素内图像的宽度和高度？

Question

例如:

<picture> 

<source media="(min-width:650px)" srcset="mycat.jpg">
<source media="min-width:460px)" srcset="burncar.jpg">
<img src="burncar2.jpg" style="width:auto;">

</picture>

现在，srcset 图像以全尺寸加载。我如何改变它的大小？我尝试在元素中添加“宽度”和“高度”，但它不起作用。我尝试在元素内添加一个类，然后在 CSS 中将其作为目标以更改大小，但它再次不起作用。为什么？以及如何更改图片的大小？

Answer 1

您可以通过 @media 实现此目的在与您的源媒体最小宽度匹配的 CSS 中。看看我在这个例子中做了什么。这是 jsfiddle 供您调整屏幕尺寸。 https://jsfiddle.net/ukwhn8p1/4/

@media (min-width: 460px) {
  .pictures {
    width: 25%;
  }
}

@media (min-width: 650px) {
  .pictures {
    width: auto;
  }
}

<picture>
<source media="(min-width:650px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg">
<source class="flower" media="(min-width:460px)" srcset="https://www.w3schools.com/tags/img_pink_flowers.jpg">
<img class="pictures" src="https://www.w3schools.com/html/img_girl.jpg" style="">
</picture>