Question

我正在尝试使背景与背景属性中选择的图片具有相同的高度和宽度。我希望高度和宽度能够反应而不是静止。

我知道可以用图片完成，但如果有可能的话，它会想成为背景吗？

<div style="background:url('http://cdn.lolhappens.com/wp-content/uploads/2013/06/Aww-in-a-picture.jpg'); background-size:100%"></div>

一个简单的fiddle here

我希望它具有与使用this example

的图像相同的效果

我解决了这个问题：

我找到了我的anwser here

简而言之，就是制作一个透明的图片，然后像这样拥有一个img容器的div：

    <div style="background:url('background.jpg'); background-size:100% 100%; width:100%; height:100%">
       <img src="transparent.png" style="width:100%" />
    </div>

Answer 1

/* default screen, non-retina */
.hero  { background-image: url("../img/candc970.jpg"); }

@media only screen and (max-width: 320px) {
    /* Small screen, non-retina */
    .hero  { background-image: url("../img/candc290.jpg"); }
}
@media
only screen and (min-resolution: 2dppx) and (max-width: 320px) {
    /* Small screen, retina */
    .hero  { background-image: url("../img/candc290@2x.jpg"); }
}
@media only screen and (min-width: 321px) and (max-width: 538px) {
    /* Medium screen, non-retina */
    .hero { background-image: url("../img/candc538.jpg"); }
}
@media
only screen and (min-resolution: 2dppx) and (min-width: 321px) and (max-width: 538px) {
    /* Medium screen, retina */
    .hero  { background-image: url("../img/candc538@2x.jpg"); }
}
@media
only screen and (min-resolution: 2dppx) and (min-width: 539px) {
    /* Large screen, retina */
    .hero  { background-image: url("../img/candc970@2x.jpg"); }
}

您可以使用CSS进行管理

Answer 2

将background-size:100% 100%添加到您的风格

div {
    background:url('http://cdn.lolhappens.com/wp-content/uploads/2013/06/Aww-in-a-picture.jpg') no-repeat;
    width:100%; /* make sure you have set this */
    height:100%; /* make sure you have set this */
    background-size:100% 100%
}

demo here

Answer 3

@media screen and（max-width：380px）{ 。英雄 { background-image：url（“../ img / IMGBIG.jpg”）; } }

@media screen and（max-width：320px）{ 。英雄 { background-image：url（“../ img / IMGSMALL.jpg”）; } }

使背景图像响应

我解决了这个问题：

3 个答案: