Question

我想通过CSS插入图片，因为我想在图片上使用字幕。

我想要的是图像完全显示并具有响应性。

任何人都可以帮我吗？

在这里，您可以使用bootstrap查看我的HTML im。正如您所看到的，我希望通过使用CSS背景图像代码让contentblock1显示响应式图像。我也希望这个背景图像能够响应。但无论我尝试什么，都不会向我展示背景。

<div class="container">
        <div class="col-sm-6">
            <h1> Dit is een bootstrap site</h1>
            <button type="button">click me!</button>
        </div>
        <div class="col-sm-6">
            <div class="contentblock1">

            </div>
        </div>

我正在使用以下CSS

.contentblock1 {
background-image: url('http://1.bp.blogspot.com/_zxdOSKs0ASI/TDMqbnatRwI/AAAAAAAAAkM/nB-DxcVcqqk/s1600/Testbeeld.jpg');
background-size: 100% 100%;
width: 100%;
}

Answer 1

width: 100px; /*you width*/
height: 100px; /*you height*/
/* optional: background-color: white; */
background-image: url('image.png');
background-repeat: none;
background-size: 100% 100%;
/*or
background-size: cover;
background-position: 50% 50%;*/
background-attachment: fixed;

Answer 2

#some-div {
   background-image: <imgurl>;
   background-repeat: none; //Unless you want something else
   backgorund-size: 100% 100%;
}

并且为了响应，请使用媒体查询或为响应性而创建的库，例如Bootstrap。

下面是一个媒体查询示例。

@media (min-width: 1200px) 
{
   #some-div {
       width: 600px;
   }
}

@media (max-width: 768px) 
{

   #some-div {
       width: 100%;
   }
}

编辑： http://jsfiddle.net/e8xLf4u3/

这是您的工作示例，它只需要内容。此外，将来请展示一些代码以获得更快的帮助和更好的理解

Graag gedaan;）

背景图像网址响应图像

2 个答案: