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：

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者将picture设置为block || inline-block以通过width启用尺寸调整：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你的目标是错误的，当你写css总是知道你在说什么做，为此你需要说明target right

然后编写css指令img selections

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: