引导图像在 Safari 中没有响应答案

【问题标题】：Boostrap image not responsive in safari引导图像在 Safari 中没有响应
【发布时间】：2017-06-09 20:02:05
【问题描述】：

我意识到我的网站无法在 safari（桌面版和移动版）上运行。由于某种原因，图像没有响应。我用的是 Bootstrap 主题，网站很简单。请帮忙！

网站：www.scanek.com

HTML：

<section id="portfolio" class="pfblock">
    <div class="container">
        <div class="row">

            <div class="col-sm-6 col-sm-offset-3">

                <div class="pfblock-header wow fadeInUp">
                    <h2 class="pfblock-title">Categories</h2>
                    <div class="pfblock-subtitle">

                    </div>
                </div>

            </div>

        </div><!-- .row -->


        <div class="row">

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <div class="grid wow zoomIn">
                    <a href="categories/kitchen/index.html">
                    <figure class="effect-bubba">
                        <img src="assets/images/kitchens.jpg" alt="img01" class="img-responsive" />
                        <figcaption>
                            <h2> <span>Kitchens</span></h2>
                            <p></p>
                        </figcaption>           
                    </figure>
                    </a>
                </div>

            </div>

            <div class="col-xs-12 col-sm-6  col-md-4 col-lg-4">
                <div class="grid wow zoomIn">
                    <a href="categories/bathroom//bathroom1/index.html">
                    <figure class="effect-bubba">
                        <img src="assets/images/bathrooms.jpg" alt="img01"/>
                        <figcaption>
                            <h2> <span>Bathrooms</span></h2>
                            <p></p>
                        </figcaption>           
                    </figure>
                    </a>
                </div>

            </div>


            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <div class="grid wow zoomIn">
                   <a href="categories/fixtures/index.html">
                    <figure class="effect-bubba">
                        <img src="assets/images/fixtures.jpg" alt="img01"/>
                        <figcaption>
                            <h2>House<span> Fixtures</span></h2>
                            <p></p>
                        </figcaption>           
                    </figure>
                    </a>
                </div>

            </div>

        </div>


    </div><!-- .container -->

</section>

CSS：

img {
max-width: 100%;
width: 100%;
height: auto;
}

.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;

}

figure.effect-bubba img {
opacity: 0.75;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}

【问题讨论】：

你的 CSS 是从哪里形成的..？因为我怀疑width: 100% 指定大小可能会覆盖引导程序。
css 代码来自 bootstrap。我添加的 img {} 代码是为了应对其他试图提供帮助的威胁，但它不起作用。

标签： html css twitter-bootstrap responsive-design safari

【解决方案1】：

首先，您提供给我们的链接上的 CSS 语法不正确，你有：

img {
    max-width: 100% width :100% height: auto;
}

尝试：

img {
 max-width: 100%;
 width :100%;
 height: auto;
}

在你解决了这个问题之后，如果问题仍然存在，我们可以尝试帮助你..

【讨论】：

抱歉打错了。我已经修复它但什么也没发生。 Safari 是问题所在。在任何其他网络浏览器中它都可以工作。
在 safari 上测试过：iphone6s、tabler air 和最新的桌面 safary 图像一切正常

【解决方案2】：

除了imgwidth（应该是宽度：100%；）上的 CSS 错字之外，.img-reponsive 仅在一个图像集上。

在所有图像上设置.img-responsive。

检查以下小提琴的大小调整：https://jsfiddle.net/Syden/5mfvj9v2/20/

以下片段：

img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.grid figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}

figure.effect-bubba img {
  opacity: 0.75;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="portfolio" class="pfblock">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <div class="pfblock-header wow fadeInUp">
          <h2 class="pfblock-title">Categories</h2>
          <div class="pfblock-subtitle">
          </div>
        </div>
      </div>
    </div>
    <!-- .row -->
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <div class="grid wow zoomIn">
          <a href="categories/kitchen/index.html">
            <figure class="effect-bubba">
              <img src="https://placehold.it/200x500" alt="img01" class="img-responsive" />
              <figcaption>
                <h2> <span>Kitchens</span></h2>
                <p></p>
              </figcaption>
            </figure>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6  col-md-4 col-lg-4">
        <div class="grid wow zoomIn">
          <a href="categories/bathroom//bathroom1/index.html">
            <figure class="effect-bubba">
              <img src="https://placehold.it/200x500" alt="img01" class="img-responsive" />
              <figcaption>
                <h2> <span>Bathrooms</span></h2>
                <p></p>
              </figcaption>
            </figure>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <div class="grid wow zoomIn">
          <a href="categories/fixtures/index.html">
            <figure class="effect-bubba">
              <img src="https://placehold.it/200x500" alt="img01" class="img-responsive" />
              <figcaption>
                <h2>House<span> Fixtures</span></h2>
                <p></p>
              </figcaption>
            </figure>
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- .container -->
</section>

【讨论】：