내부 이미지와 함께 div의 반응 배경 이미지

Question

IMG가 내부에 감싸 인 DIV의 반응 형 배경 이미지를 만들고 싶습니다. 이와 같은 것 :

bootstrap을 사용하고 있습니다. 다음은 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>

.

여기에는 CSS가 있습니다.

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

.

이것은 배경 이미지를 반응시키지 만 이미지를 배경과 평행하게 어떻게 만들 수 있습니까? thnx

Answer 1

편집 : ODD, 제공된 CSS에서 .device-laptop가 고정 된 너비와 높이가있는 것으로 나타납니다.그것이 어떻게 유체가 될지 모르겠습니다.

어쨌든 @papa

에 의해 언급 된 background-size:contain 옵션 활용

.. 마크 업을 변경하면 괜찮 으면 좋습니다.아래는 일을 할 것입니다.

fiddle : http://jsfiddle.net/varinder/wf3u8/1//

html

<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를 사용하여 필요에 따라 요구합니다.커버가 더 나은 옵션 일 수 있습니다.