صورة خلفية سريعة الاستجابة لقسم مع صورة داخلية

Question

أرغب في إنشاء صورة خلفية سريعة الاستجابة لقسم يحتوي على ملف img بداخله:شيء من هذا القبيل:

أنا أستخدم التمهيد.هنا هو HTML:

<div class="col-lg-5 col-md-5 col-sm-10 col-xs-10">
  <div class="device-laptop">
     <img src="img/test.jpg"/>
  </div>
</div>

وهنا هو المغلق:

device-laptop{
  background: url('../img/macpro.jpg') no-repeat;
  width: 363px;
  height: 208px;
  padding: 12px 45px 23px 43px;
  background-size:100%;
}

.device-laptop img{
  width: 274px;
  height: 172px;
}

هذا هو الشكل الطبيعي.الآن أريد أن أجعل هذا سريع الاستجابة، لذلك عندما تتغير صورة الخلفية، تتغير الصورة الداخلية أيضًا.هل هناك أي طريقة لتحقيق ذلك؟

حاولت:

.device-laptop{
  background: url('../img/macpro.jpg') no-repeat;
  /*width: 363px;*/
  background-size:100%;
  height: 208px;
}

هذا يجعل صورة الخلفية سريعة الاستجابة ولكن كيف يمكنني أيضًا جعل الصورة متوازية مع الخلفية؟شكرا

Answer 1

يحرر:غريب، من ملف CSS المقدم، يبدو أن .device-laptop له عرض وارتفاع ثابت.لست متأكدا كيف سيكون السائل بعد ذلك؟

على أية حال، الاستفادة background-size:contain الخيار الذي ذكره @papa

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

كمان: http://jsfiddle.net/Varinder/wf3U8/1/

لغة البرمجة

<div class="some-awesome-laptop">
    <div class="some-awesome-wallpaper-wrapper">
        <img src="http://placehold.it/250x150&text=text" class="some-awesome-wallpaper" />
    </div>
</div>

CSS

.some-awesome-laptop {
    background-image:url("http://placehold.it/270x180/aaa&text=a");
    background-repeat:no-repeat;
    width:270px;
    max-width:100%;
    margin:0 auto;
    height:0;
    overflow:hidden;
    padding-bottom:66%; /* aspect ratio of the image: (180/270)*100 */
    position:relative;

    -webkit-background-size:contain;
    -moz-background-size:contain;
    background-size:contain;

}

.some-awesome-wallpaper-wrapper {
    padding:10px;
}

.some-awesome-wallpaper { 
    max-width:100%;
    display:block;
}

Answer 2

يستخدم background-size:cover أو background-size:contain لتناسب احتياجاتك.قد يكون الغطاء هو الخيار الأفضل.