是要根据不同尺寸加载不同图片，还是同一图片在不同屏幕尺寸下自动调整大小？

@Martin91 同一图片在不同屏幕尺寸下自动调整大小！

@Martin91 我用 ionic 开发，在实现一个商品详细页面的时候，就出现问题

#2 楼 @stephen 那就是响应式设计的知识了。主要就是学一下媒体查询（media query）

这里有一些资源 一些实用的 CSS Media Query 代码片段 CSS3 媒体查询模板

不同手机都是 fullwidth 么？看你这个应该就 width:100% 就可以了吧

顺便赞一下你的图片！

@ikunsam 没效果呢！我也尝试过！

@Martin91 好的，谢谢

@stephen 从图上看 你图片外部的容器应该是正常的，你把容器 position 写成 relative 了没？

#8 楼 @stephen 是不是不小心用了绝对定位之类的？绝对定位的元素的 width 属性计算是以 包含块为准的，其他绝大部分情况下则是以父元素为准。

我的代码，我目前没改到框架原来的 CSS，我试试

<div class="list">
      <div class="item">
        <ion-slide-box>
          <ion-slide ng-repeat="picture in product.pictures">
            <div class="slide-box">
              <img src="{{picture.image.url}}?500x500" style="width:100%;height:auto;">
            </div>   
          </ion-slide>
        </ion-slide-box>
      </div>
</div>

@Martin91 @ikunsam 设置了也不行！

#13 楼 @stephen 那就不清楚了，这个有没有调试工具的？有可能问题不是出在 img 身上，而是其祖先元素。

@Martin91 调试就用浏览器来调试，这是这个框架的样式，我去掉div class="slide-box"这个 div，图片就会不显示了！

/**
 * Slide Box
 * --------------------------------------------------
 */
.slider {
  position: relative;
  visibility: hidden;
  overflow: hidden; }

.slider-slides {
  position: relative;
  height: 100%; }

.slider-slide {
  position: relative;
  display: block;
  float: left;
  width: 100%;
  height: 100%;
  vertical-align: top; }

.slider-slide-image > img {
  width: 100%; }