Boostrap Bild reagiert nicht in Safari

Question

Ich erkannte, dass meine Website nicht auf Safari (Desktop und Mobile) funktioniert. Aus irgendeinem Grund reagieren die Bilder nicht. Ich habe ein Bootstrap-Thema verwendet, die Website ist einfach. Bitte helfen Sie!

Webseite: 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 Syntaks auf Link, den Sie uns zur Verfügung stellen ist nicht richtig, für den Start, Sie haben :

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

versuchen mit:

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

nach yo diese Probleme zu beheben, dann, wenn das Problem ist immer noch da können wir versuchen, Ihnen zu helfen ..

Answer 2

In addiion auf dem CSS-Tippfehler auf imgwidth (sollte breit sein : 100%;), Sie hatten .img-reponsive nur auf einem Bildsatz.

Set .img-responsive auf allen Bildern.

prüfen auf folgende Geige Größe ändern: https://jsfiddle.net/Syden/5mfvj9v2/20/

Snippet unten:

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>