CSS: صورة الخلفية لا يتم إعادة قياسها على الجوّال

أنا لست مبرمجًا لكن لديّ بعض المعرفة الأساسية وقمت بتحرير القالب. الموقع موجود تقريبًا - على سطح المكتب يبدو جيدًا ، ولكن على الجوال لا تتقلص صورة الغلاف.

لقد حاولت تغيير الحجم من 100٪ ، والسيارات والتغطية ، لعبت مع vw و vh الخ ، ولكن لا يزال لا يمكن الحصول على أي شيء للعمل.

إليك CSS:

.intro {
  display: table;    
  height: auto;    
  width: auto; /* 100% originally */ .   
  padding: 0;    
  text-align: center;    
  color: #333;    
  background: url(../img/intro-bg.jpg) no-repeat center top;    
  background-color: #e5e5e5;    
  -webkit-background-size: cover;    
  -moz-background-size: cover;    
  background-size: auto;    
  -o-background-size: auto;    
} 

إذا كان أي شخص يمكن أن يساعد من شأنها أن تكون كبيرة! الموقع هو adammillsmusic.com

شكر!

0

4 إجابة

شكرا لمساعدتكم - هذا حل المشكلة. على الرغم من أنه الآن بعد رؤية النتيجة ، أعتقد أنه ربما يكون من الأفضل استدعاء صورة بحجم أصغر من خلال استخدام 'media' لموقع الجوال. المشكلة الوحيدة هي في محرر الشفرة عندما أحاول القيام بذلك لا يبدو أنه يتعرف على علامة 'media' ويعاملها مثل/* * / أي أفكار؟! شكر

@media screen and (max-width: 600px) {
.intro {background-color: #e5e5e5;
background: url(../img/Bg-mountain-small.png) no-repeat center top;
}
0
وأضاف

أنت بادئة الخصائص قيمًا مختلفة:

  • -webkit-background-size: cover; : On webkit (Chrome & co), cover the background
  • background-size: auto; On other browsers, do not cover

ربما هذا هو السبب في أنك ترى خلفية مغطاة على سطح المكتب لديك ولديك نتائج غير متوقعة على متصفح الجوال.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class = "snippet-code">

 body {
  جدول العرض؛
  الارتفاع: auto؛
  العرض: تلقائي/* 100٪ في الأصل * /.
  الحشو: 0؛
  محاذاة النص: مركز؛
  اللون: # 333 ؛
  الخلفية: url (// placecage.com/200/200) عدم تكرار مركز القمة ؛
  لون الخلفية: # e5e5e5.
  حجم الخلفية: غطاء ؛
} </القانون> </قبل>
</div></div>


0
وأضاف

بالنسبة إلى الصور سريعة الاستجابة ، يمكنك إجراء ما يلي في فئة .intro

intro {
    max-width: 100%;
    height: auto;
    display:block;
    padding: 0;
    text-align: center;
    color: #333;
    background: url(../img/intro-bg.jpg) no-repeat center top;
    background-color: #e5e5e5;
    background-size: contain;
    -webkit-background-size: contain
}

التغييرات الرئيسية

max-width: 100%;
height: auto;
display:block;

أتمنى أن يساعدك هذا

0
وأضاف
شكرا لمساعدتك! هذا حلها!
وأضاف المؤلف Adam Mills, مصدر

قم بتعيين max-width على 100٪ من هذا القبيل:

max-width: 100%;
0
وأضاف