Отзывчивый фоновый образ равна вместе с внутренним изображением
-
20-12-2019 - |
Вопрос
Я хочу сделать отзывчивый фоновый образ div, который имеет IMG, завернутый внутрь: Что-то вроде этого:
Я использую 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
Решение
Редактировать: нечетные, от предоставленных CSS, кажется, что .device-laptop
имеет фиксированную ширину и высоту.Не уверен, как это будет жидкость, то?
В любом случае, используя опцию background-size:contain
, упомянутая @PAPA
.. Если вы в порядке с изменением вашей разметки.Ниже сделает работу.
Widdle: 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;
}
. Другие советы
Используйте background-size:cover
или background-size:contain
, чтобы набирать ваши потребности.Крышка может быть лучшим вариантом.