css - 如何调整通过 <picture> 标签插入的图像的大小？

Question

我使用以下 HTML 插入了一张图片:

@media screen and (min-width: 600px) {
  .showcase picture {
    width: 30%;
  }
}

<div class="showcase">
  <picture>
    <source media="(min-width:600px)" srcset="images/p1.jpg">


      <img src="images/p1mob.jpg" width=100% alt="Image 1" />
  </picture>

  <p> <a href="">OUR MENU</a> 
  </p>
</div>

我只想在屏幕的最小宽度为 600px 时将图片的宽度设置为 30%。

添加上面的 CSS 没有任何作用。我如何实现我想要的？

Answer 1

以 img 而非 picture 为目标:

@media screen and (min-width: 600px) {
  .showcase picture img {
    width: 30%;
  }
}

<div class="showcase">
  <picture>
    <source media="(min-width:600px)" srcset="http://placehold.it/400x400">


      <img src="http://placehold.it/400x400" width=100% alt="Image 1" />
  </picture>

  <p> <a href="">OUR MENU</a> 
  </p>
</div>

或者将你的图片设置为block || inline-block 以通过 width 启用大小调整:

@media screen and (min-width: 600px) {
  .showcase picture {
    display: inline-block;
    width: 30%;
  }
}

<div class="showcase">
  <picture>
    <source media="(min-width:600px)" srcset="http://placehold.it/400x400">


      <img src="http://placehold.it/400x400" width=100% alt="Image 1" />
  </picture>

  <p> <a href="">OUR MENU</a> 
  </p>
</div>