मुझे एहसास हुआ कि मेरी वेबसाइट सफारी (डेस्कटॉप और मोबाइल) पर काम नहीं कर रही है। किसी कारण से छवियां उत्तरदायी नहीं हैं। मैंने बूटस्ट्रैप थीम का उपयोग किया है, वेबसाइट सरल है। कृपया सहायता कीजिए!

वेबसाइट: www.scanek.com

एचटीएमएल:

<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> 

सीएसएस:

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;
}
0
Aileen S 9 जून 2017, 04:09
आपका सीएसएस फॉर्म कहां से आता है ..? क्योंकि मुझे संदेह है कि width: 100% आकार निर्दिष्ट करने से बूटस्ट्रैप ओवरराइड हो सकता है।
 – 
Bagus Tesa
9 जून 2017, 04:13
CSS कोड बूटस्ट्रैप से आया है। आईएमजी {} कोड मैंने मदद करने की कोशिश कर रहे अन्य खतरों के जवाब में जोड़ा, लेकिन यह काम नहीं किया।
 – 
Aileen S
9 जून 2017, 15:04

2 जवाब

आपके द्वारा हमें प्रदान किए गए लिंक पर आपका सीएसएस सिंटैक्स सही नहीं है, शुरुआत के लिए, आपके पास है:

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

इसके साथ प्रयास करें:

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

इस समस्या को ठीक करने के बाद, यदि समस्या अभी भी बनी हुई है, तो हम आपकी सहायता करने का प्रयास कर सकते हैं..

0
MR.Don't know 9 जून 2017, 04:25
क्षमा करें कि एक टाइपो था। मैंने इसे पहले ही ठीक कर लिया है लेकिन कुछ नहीं हुआ। सफारी समस्या है। किसी भी अन्य वेब ब्राउज़र में यह काम करता है।
 – 
Aileen S
9 जून 2017, 15:09
सफारी पर परीक्षण किया गया: iphone6s, टेबलर एयर, और नवीनतम डेस्कटॉप सफारी छवियों के साथ सब कुछ ठीक है
 – 
MR.Don't know
9 जून 2017, 16:43

सीएसएस टाइपो के अलावा img width(चौड़ाई होनी चाहिए: 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>
0
Syden 9 जून 2017, 04:28