Question

如何在img --> src的移动视图中更改图片？我想在移动视图中使用媒体查询更改为不同的图像如何做到这一点？ 我不想将它用作背景图片！

<div class="item">
    <img src="http://lorempixel.com/1500/600/abstract/1" class="img-responsive">
    <div class="container">
        <div class="carousel-caption">
            <h1>Changes to the Grid</h1>
            <p>Bootstrap 3 still features a 12-column grid, but many of 
                the CSS class names have completely changed.
            </p>
        </div>
    </div>
</div>

Answer 1

＆＃13;

.img-mobile-image {
  display: none;
}

@media (max-width:767px) {
  .img-responsive {
    display: none;
  }
  .img-mobile-image {
    display: block !important;
  }
}

＆＃13;

<div class="item">
  <img src="http://lorempixel.com/1500/600/abstract/1" class="img-responsive">
  <img src="mobile-imag-path" class="img-mobile-image">
  <div class="container">
    <div class="carousel-caption">
      <h1>Changes to the Grid</h1>
      <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您可以使用以下类切换到不同的图像。请根据需要调整断点。

   .pc_img {
      display:none;
    }
    @media (min-width: 768px) {
      .sp_img {
        display: none;
      }
      .pc_img {
        display: inline;
      }
    }

媒体查询img src属性

2 个答案: