Question

我意识到我的网站没有使用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;
}

Answer 1

您提供给我们的链接上的css syntak不正确，首先，你有：

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

尝试：

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

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

Answer 2

除了img width上的CSS拼写错误（应该是宽度：100％;），您在一个图像集上只有.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>

Boostrap图像在野生动物园中没有响应

2 个答案: