使用图像和文本响应css和bootstrap创建div

Question

我已将图像和文字放在div上，背景如下

为此完成的CSS如下所示

#image_container {
background: url('images/1.jpg') no-repeat;
max-width:100%;
height:auto;
text-align: center;
padding: 30px;
margin: 10px;
box-sizing: border-box;
}
.main_image {
height: 220px;
margin:-5px;
}
.text {
padding: 5px; 
}
.ltext {
margin-top: -5px;
}

和HTML标记如下

<a href="blog/<link to post>" style="color:inherit">
<div class="col-sm-4">
<div id="image_container" class="">
<img src="images/blog/1.jpg" 
class="main_image" alt=""/>
<div class="text">
<img src="images/dot.png" class="col-sm-12 col-xs-12 col-md-12 
col-lg-12" alt="divider" style="max-width:100%"/>
Mouting Memories
<p class="ltext">
<?php echo date('l', $time).', '.date('F', $time).' ' ?><?php echo    
date('d', $time).', '.date('Y', $time);?>
</p>
</div>
</div>
</div>
</a>

但是通过上述方法，内部图像和文本无法在屏幕尺寸chnage上正确显示。它显示为here

请帮忙。

Answer 1

#image_container {
background: url('blogpost_bg.jpg') no-repeat;
max-width:100%;
height:auto;
text-align: center;
padding: 30px;
margin: 10px;
box-sizing: border-box;
background-size:100% 100%;
}
.main_image {
height: 220px;
margin:-5px;
}
.text {
padding: 5px; 
}
.ltext {
margin-top: -5px;
}

将background-size:100% 100%;添加到#image_container

的CSS中

您的HTML和PHP

<a href="blog/<link to post>" style="color:inherit">
<div class="col-sm-4">
<div id="image_container" class="">
<img src="images/blog/1.jpg" 
class="main_image" alt=""/>
<div class="text">
<img src="images/dot.png" class="col-sm-12 col-xs-12 col-md-12 
col-lg-12" alt="divider" style="max-width:100%"/><br>
Mouting Memories
<p class="ltext">
<?php echo date('l', $time).', '.date('F', $time).' ' ?><?php echo    
date('d', $time).', '.date('Y', $time);?>
</p>
</div>
</div>
</div>
</a>

在图像（<br>）之后添加<img>，以便测试被强制到下一行，即使它有足够的空间放在与图像相同的行上

你的PHP也不是很好。

应该是

<?php echo date('l, F d, Y', $time);?>

这是快速的方法。更好的方法是使用CSS作为背景而不是您使用的图像，因为该图像会拉伸和像素化。使用-webkit-box-shadow，-moz-box-shadow和box-shadow而不是背景图像，请参阅下面的更好的CSS。

#image_container {
-webkit-box-shadow: 2px 2px 17px 5px rgba(0,0,0,0.37);
-moz-box-shadow: 2px 2px 17px 5px rgba(0,0,0,0.37);
box-shadow: 2px 2px 17px 5px rgba(0,0,0,0.37);
max-width:100%;
height:auto;
text-align: center;
padding: 30px;
margin: 10px;
box-sizing: border-box;
}

使用CSS

看起来更干净